CSS float与width属性实现简单分栏方法

在CSS布局的演进历程中，float属性曾是实现分栏效果的“功臣”。但时至今日，如果你在新项目中还打算用它来构建多栏布局，恐怕得重新权衡了。一个核心判断是：float因其固有的设计特性，极易引发父容器高度塌陷、清除浮动成本高昂以及响应式适配困难等一系列问题。因此，在现代开发实践中，flexbox或grid布局已成为更优、更稳健的选择。

为何CSS float分栏已非现代布局首选

平心而论，单纯依赖float来实现分栏，已经算是一种过时的方案了。尽管它的浏览器兼容性极佳，甚至能追溯到IE6时代，但随之而来的副作用实在让人头疼。除非你正在维护一个必须兼容IE8甚至更早版本的老旧项目，否则，把精力投入到掌握flexbox或grid上，回报率会高得多。

float分栏必须同时设置width和float才有效

想用float让两个元素并排？这里有个关键细节：width和float属性必须“双管齐下”。

如果只设置float: left而不定义width，元素会尽可能地撑满其内容的宽度，根本无法形成规整的并排效果。反过来，如果只设置了width而忘了float，元素依然会按照普通的文档流垂直堆叠，分栏也就无从谈起了。

• float: left：它的作用是让元素脱离正常的文档流，并向左边界靠齐，从而实现横向排列。
• width：这个值必须具体，比如300px、50%，或者更灵活的calc(50% - 10px)。如果使用百分比，务必确保其父容器有明确的宽度定义，否则百分比会失效。
• 经典组合：常见的两栏布局，宽度组合可能是width: 65%加上width: 35%，或者一侧固定width: 200px，另一侧自适应width: calc(100% - 200px)。

父容器高度塌陷是float分栏最常见的问题

这大概是float布局中最令人困扰的问题了。当子元素浮动后，它们便脱离了正常的文档流。这时，父容器会“认为”自己内部没有内容，从而导致其高度计算为0。表现出来就是背景消失、边框缩成一条线，后面的兄弟元素也会“挤”上来。需要明确的是，这并非浏览器的bug，而是float属性最初设计时就是如此——它本身并不考虑包裹浮动子元素。

那么，如何“清除浮动”来修复高度塌陷呢？历史上诞生过不少方法：

• 临时方案：在父容器末尾添加一个空标签，并赋予style="clear:both"。方法简单，但污染了HTML结构，不推荐用于生产环境。
• 传统方案：为父容器设置overflow: hidden或overflow: auto。这能触发BFC（块级格式化上下文）来包裹浮动元素。但要注意，它可能会意外地裁剪内容或产生滚动条，需要谨慎使用。
• 现代方案：使用CSS伪元素，这是目前最优雅和推荐的做法。为父容器添加::after { content: ""; display: table; clear: both; }即可，既不会污染结构，又能完美清除浮动。

float分栏在响应式场景下极易失效

在移动优先的今天，float分栏的另一个短板暴露无遗：响应式适配非常笨拙。当视口宽度变小时，如果子元素的width是固定像素值（比如300px），很容易就会溢出父容器，导致布局错乱。如果改用百分比宽度，又常常因为没算好内边距（padding）和外边距（margin）的空间，导致总宽度超过100%而被迫换行。

有几个小技巧可以缓解，但终究是治标不治本：

• 尽量避免写死width: 300px，可以尝试max-width配合width: 100%的组合，让元素在窄屏时自动缩放。
• 为左右栏添加间隙时，别只用margin-right。记得加上box-sizing: border-box，让元素的padding和border都计算在width之内，防止总宽度超标。
• 最麻烦的是，在媒体查询中，你常常需要手动重置一堆float和width的值。与其如此，不如直接在断点处将布局方式切换为display: flex，反而更清晰。

说到底，float分栏在今天还能发挥余热的场景已经非常有限了。比如一些对flexbox支持很差的电子邮件客户端模板，或者某些需要精确控制文字环绕图片的老式内容管理系统。除此之外，对于绝大多数现代Web项目，花点时间掌握flex-wrap和grid-template-columns，无疑是更值得的投资。