CSS中的float属性自诞生起就带有明确的语义：它本意是让元素脱离常规文档流并向左或向右移动，使周围的文本内容能够环绕其显示。这种机制在早期的报刊式网页排版中非常实用，比如让一张图片浮动在左侧，右侧段落文字自然绕排。不过随着布局需求复杂化，开发者常把它当作多栏布局的权宜之计，也因此引发了诸如父容器高度塌陷、后续块级元素错位等典型问题。要稳妥使用浮动，必须先弄清楚它的底层行为。
一、float属性的基本作用
当一个元素被赋予float:left或float:right时，它首先会脱离普通的文档流。这里的脱离并不是完全消失，而是该元素在普通流中不再占据原本的位置，后面的块级盒子会当这个浮动元素不存在一样正常排列，但行内级内容（如文字、行内图片）会感知到它的存在并绕开它。这种差异正是浮动最容易被误解的地方。
从渲染顺序看，浮动元素会尽可能向指定方向移动，直到它的外边缘碰到包含块的边缘，或者碰到另一个浮动元素的外边缘为止。因此多个浮动元素会像水流中的木块一样依次贴靠。下面的代码展示了两个div浮动后并排显示的效果：
<div class="box left">左浮动</div>
<div class="box right">右浮动</div>
<p>这是一段普通文字，它会环绕在浮动元素的周围显示，而不是被浮动元素覆盖。</p>
<style>
.box { width: 100px; height: 100px; background: #ccc; }
.left { float: left; }
.right { float: right; }
</style>
上述代码中，两个方块分别贴向左右容器边，段落文字自动分布在它们之间的剩余空间中。如果去掉float，两个div将各自独占一行，这就是浮动对行内内容排版的直接影响。
二、浮动引发的包含块高度塌陷
由于浮动元素脱离了文档流，其父容器在计算自身高度时不会把浮动子元素的高度算进去。这就导致一种常见现象：父div没有设置固定高度，里面只有浮动子元素，结果父div在页面上高度为0，背景或边框都无法包裹住内容。很多初学者以为这是浏览器bug，其实是CSS规范的定义。
解决该问题的核心思路是"清除浮动"或触发BFC（块级格式化上下文）。最经典的做法是在父容器末尾添加一个带有clear:both的空元素，强制父容器在清除元素之前包含所有浮动。现代更推荐的做法是给父容器设置overflow:hidden或采用伪元素清除法，避免多余标签。
/* 伪元素清除浮动方案 */
.clearfix::after {
content: "";
display: block;
clear: both;
}
/* 父容器触发BFC */
.parent {
overflow: hidden;
}
使用clear:both的意思是：该元素左边和右边都不允许有浮动元素，因此它会被推到所有浮动元素的下方，从而把父容器高度撑开。伪元素方案把这一过程隐藏在CSS中，HTML结构保持干净，是目前团队开发中的主流写法。
三、float的典型使用场景
尽管Flexbox和Grid已成为主流布局方式，float仍在一些局部场景中不可替代。其一是图文混排：当需要在文章里插入一张侧边插图，并让正文自然环绕，float是最语义化且零依赖的方案。其二是历史项目维护：大量旧系统样式基于浮动多栏，理解它才能安全修改。
另一个实用场景是制作横向导航条。将列表项设为左浮动，它们就会排成一行，再配合清除浮动即可实现简单菜单。以下示例演示了用浮动实现的水平菜单：
<ul class="nav clearfix">
<li>首页</li>
<li>文章</li>
<li>关于</li>
</ul>
<style>
.nav li { float: left; list-style: none; margin-right: 15px; }
.nav::after { content:""; display:block; clear:both; }
</style>
可以看到，浮动让块级li并排显示，而清除浮动保证了ul能正确包裹它们。相比之下，若用inline-block会有空白符间隙问题，float在这方面反而更可控。
四、浮动与现代布局的关系
不少人认为float已经过时，其实它和Flex、Grid并非对立。Flex擅长一维轴线的灵活分配，Grid擅长二维网格，而float擅长内容环绕。在写技术文档、博客正文时，插入的提示框或图片用float处理，页面其他结构用Flex，这种混合使用非常自然。
需要警惕的是不要拿float做整体页面框架。早期"圣杯布局""双飞翼布局"靠float加负margin实现，如今用Grid几行代码就能完成，且不会出现清除浮动的副作用。因此新项目应优先评估Grid或Flex，把float留给它最擅长的文字绕排与局部排列任务，这样才能写出可维护的样式代码。