浮动在CSS里属于理解成本不高但用起来容易出错的属性。它最早并不是为了搭建页面栅格而设计，而是为了模拟报纸排版里文字环绕图片的效果。对一个元素设置float:left之后，元素会向左侧移动，后续的行内内容会围绕在它的右侧和下方。这个环绕机制是float区别于绝对定位和普通块级布局的核心。理解了这一点，再去看高度塌陷、清除浮动以及多栏布局，很多现象会变得清晰。
一、float的定位规则与实际表现
float属性最常用的取值是left、right和none，inherit则用于继承父级。元素被设置浮动后，会从普通块级排列中移除，但不会像绝对定位那样完全退出布局。向左浮动的元素会一直移动，直到碰到包含块的左边界或另一个浮动元素的边缘。向右浮动同理。浮动元素的宽度通常会收缩到内容所需的最小值，这一点和块级元素默认撑满父容器不同。
还有一点要注意：无论原元素的display是inline还是block，一旦浮动，它就会生成块级框。也就是说，行内元素设置float:left后，可以设置宽度和高度。这个行为在图片、按钮等元素上经常被用到。下面是一个基础示例，用来观察浮动元素如何影响后面的文字。
<div class="container"> <div class="box">浮动元素</div> <p>这段文字会环绕在浮动元素的右侧。</p> </div>
.container {
border: 1px solid #333;
padding: 10px;
}
.box {
float: left;
width: 120px;
height: 80px;
background: #eef;
margin-right: 10px;
}
运行上面代码后，容器的高度来自文字，而不是浮动方块。这正是很多人第一次使用float时感到困惑的地方：方块明明在那里，父容器却好像没把它算进去。要解释这个现象，需要引入“半脱离”的概念。浮动元素脱离了块级布局的占位，但仍会参与行框的生成，因此文字能够感知到它并绕开。
二、高度塌陷的成因与清除浮动
高度塌陷通常发生在一个父元素只包含浮动子元素的时候。因为浮动子元素不再占据父元素在普通流中的高度空间，父元素又没有其他正常流内容，于是计算出的高度就是0。如果父元素设置了背景色或边框，视觉上会直接缩成一条线。这个问题在旧版浏览器中尤其普遍，现在虽然有了更多现代布局方案，但float场景下依然需要处理。
修复高度塌陷的思路主要有两条。第一条是让父元素建立新的块级格式化上下文，简称BFC。BFC内部元素的浮动会被容器识别，从而让父元素重新获得高度。常见触发方式是给父元素设置overflow:hidden或overflow:auto。第二条思路是使用clear属性，让浮动元素后方的元素不环绕浮动，而是在浮动元素下方开始显示。两种方式各有适用场景，下面用clearfix方案做演示。
.clearfix::after {
content: "";
display: block;
clear: both;
visibility: hidden;
height: 0;
}
给需要包裹浮动子元素的父容器加上clearfix类即可。这个做法的原理是使用::after伪元素在父容器末尾生成一个块级内容，并设置clear:both，强制它出现在所有浮动元素的下方。由于它是块级框，父容器的高度会延伸到它的位置，从而间接包裹住浮动子元素。相比在HTML里手动插入空标签，clearfix不污染语义结构，维护成本更低。
clear属性本身有left、right、both等取值，both表示清除左右两侧的浮动。需要注意的是，clear只作用于设置它的元素，不能直接清除父容器内部浮动对父容器自身高度的影响。因此正确的使用位置是浮动元素后面的兄弟元素，或者伪元素。对父元素设置clear通常不会产生预期效果。
三、基于float的经典多栏布局
在flex和grid普及之前，float承担了大量页面栅格工作。双栏布局最典型的写法是：让侧边栏左浮动并设置固定宽度，主内容区通过margin-left留出侧边栏空间。这样侧边栏脱离普通块级流后，主内容区会自然占据剩余宽度。三栏布局则让左右侧边栏分别左右浮动，中间内容放在最后，利用两侧margin避开覆盖。
<div class="layout clearfix"> <aside class="sidebar">左侧导航</aside> <main class="content">主要内容区域</main> </div>
.sidebar {
float: left;
width: 200px;
min-height: 300px;
background: #f0f0f0;
}
.content {
margin-left: 220px;
min-height: 300px;
background: #eaf3ff;
}
这种布局在固定宽度场景下很稳定，但一旦需要自适应、等高列或垂直居中，float的短板就暴露出来。比如侧边栏高度变化时，主内容区不会自动跟随，需要额外设置背景模拟等高，或者使用JS辅助。再比如浮动元素的排列顺序与DOM顺序强相关，移动端需要重排内容时，往往要通过调整HTML结构实现，增加复杂度。
相比之下，display:flex可以在一维方向上轻松实现等高、自动分配空间和垂直居中，display:grid则适合更复杂的二维栅格。它们把布局控制权收回到父容器，不需要像float那样依赖清除浮动和margin补偿。不过float并没有被淘汰，文字环绕图片、首字下沉、新闻正文中的插图排列等场景，仍然是float最自然、代码量最少的解决方案。
四、常见误区与排查建议
实际项目中，float相关的问题大多集中在几个点：忘记清除浮动导致后续内容上移或背景断裂；把浮动元素宽度设置为百分比后没有考虑外边距，导致换行；在自适应容器中给浮动侧边栏固定宽度，小屏下出现横向溢出；以及误以为clear可以加在父元素上解决高度塌陷。遇到布局异常时，先确认所有浮动子元素是否被父容器正确包裹，再检查浮动元素后面的兄弟元素是否需要清除左右浮动。
调试时可以先给父容器加一个明显背景色或边框，观察高度是否正常。再给每个浮动子元素加outline，确认占位是否符合预期。DevTools中的盒模型面板能直观看到外边距、边框和内边距。如果发现文字环绕效果不符合预期，通常是缺少clear或者触发了意外的BFC。display:flow-root是现代浏览器提供的一种更语义化的BFC触发方式，但老版本浏览器支持有限，需要渐进增强。
总的来说，float的语法简单，但背后的布局逻辑需要花时间理解。掌握它的定位规则、清楚高度塌陷的成因、熟练使用clearfix和BFC，并能在flex、grid与float之间做出合理选择，基本就能应对绝大多数真实场景。对于文字环绕类需求，float依然是不可替代的工具；对于整页栅格和复杂对齐，现代布局方案通常更省心。