浮动最初是为了实现文字环绕图片效果而设计，后来被广泛用于多列布局。虽然现在有了Flex和Grid，但在不少旧项目或特定场景中仍会使用float。当给一个块级元素的子元素设置float之后，常会发现父元素高度变成了0，背景、边框都无法撑开，这就是典型的高度塌陷。想要彻底解决这个问题，必须先理解浮动对文档流的影响，再根据具体场景选择合适的修复手段。
一、浮动元素脱离文档流：父元素高度塌陷的根源
普通文档流中的块级元素会按照垂直方向依次排列，父元素的高度由内部所有正常流子元素的总高度自动撑开。然而，一旦给子元素设置了float: left或float: right，这个子元素就会脱离普通文档流，不再参与父元素的高度计算。此时如果父元素内部只有浮动子元素，没有其他普通流内容，父元素就无法感知到任何可撑开高度的子元素，最终高度变为0。
可以用一个简单的结构来验证。外层<div>带有边框，内部只有一个设置了左浮动的子<div>。父元素虽然还保留着宽度，但高度已经收缩为0，边框会叠成一条线，背景也无法正常显示。
<div class="parent"> <div class="child">浮动元素</div> </div>
.parent {
border: 2px solid #333;
}
.child {
float: left;
width: 100px;
height: 50px;
background: #4a90e2;
}
这个例子中，父元素.parent的高度为0，边框看起来只有上下两条线重叠在一起。根本原因就是浮动子元素脱离了普通流，父元素在计算高度时忽略了它。理解了这一机制，接下来就可以针对性地选择清除浮动或建立新布局上下文的方法。
二、清除浮动的几种经典手段与代码示范
清除浮动的本质是让父元素重新感知到浮动子元素的存在，或者强制在浮动元素之后产生一个能够撑开父元素高度的内容。常见方案有四种：利用overflow触发块级格式化上下文、使用clearfix伪元素、插入空标签清除浮动，以及使用display: flow-root。每种做法都有适用场景和需要注意的副作用。
第一种方法是给父元素设置overflow: hidden或overflow: auto。这个声明会让父元素建立一个新的块级格式化上下文，而BFC的一个特性就是能够包含浮动子元素的高度。代码非常简洁，但缺点是如果子元素内部有需要溢出显示的下拉菜单、提示框或者阴影，可能会被父元素裁剪掉。
.parent {
overflow: hidden;
}
第二种方法是使用clearfix，这是早期最受欢迎的方案。它通过在父元素末尾插入一个伪元素，并给这个伪元素设置clear: both，强制伪元素移动到浮动元素的下方，从而让父元素被撑开。伪元素本身不占据视觉空间，因此不需要额外添加真实标签，兼容性也比较好，直到今天仍然广泛使用。
.clearfix::after {
content: "";
display: block;
clear: both;
}
<div class="parent clearfix"> <div class="child">浮动元素</div> </div>
第三种方法是在浮动元素的后面手动插入一个空<div>，并给它设置clear: both。这是最直观的清除方式，但会在HTML结构中增加没有语义的标签，不利于后续维护，现在已经较少使用。不过在一些无法控制CSS、只能修改HTML的老项目中仍然可能遇到。
<div class="parent"> <div class="child">浮动元素</div> <div style="clear: both;"></div> </div>
第四种方法是给父元素设置display: flow-root。这个属性值专门用来让元素建立BFC，不会像overflow: hidden那样产生裁剪副作用，也不会影响元素本身的展示方式。它的兼容性在现代浏览器中已经很好，是一个非常干净的解决方案。
.parent {
display: flow-root;
}
对比这几种方法，overflow: hidden最简单但风险较大，clearfix兼容性最好但需要维护额外样式，空标签方案已过时，display: flow-root则是最符合语义的现代选择。实际项目中可以根据浏览器支持情况来决定。
三、用现代布局根治问题：Flex、Grid与容器查询
随着CSS布局能力的增强，很多原本依赖浮动的多列布局已经可以用Flexbox和Grid彻底替代。Flex容器在计算高度时会自动包含所有flex子项，即使子项没有浮动，也不会出现高度为0的问题。更重要的是，Flex还能轻松实现等宽列、垂直居中和自动换行，代码量比浮动方案更少。
.parent {
display: flex;
flex-wrap: wrap;
gap: 10px;
}
.child {
width: 100px;
height: 50px;
background: #4a90e2;
}
如果布局需求是二维网格结构，Grid会更加合适。通过grid-template-columns可以精确控制每一列的宽度，并且父元素的高度由行高自动累计，完全不存在浮动塌陷的隐患。对于响应式布局，还可以使用repeat(auto-fill, minmax(...))让列数根据容器宽度自动调整。
.parent {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
gap: 10px;
}
.child {
height: 50px;
background: #4a90e2;
}
当然，并不是所有场景都需要完全抛弃浮动。例如需要在段落中实现文字环绕图片效果时，浮动仍然是不可替代的。此时如果担心父元素高度塌陷，可以给父元素单独加上display: flow-root，就能在不改变浮动行为的同时解决高度为0的问题。理解每种方案的本质，才能在不同场景中做出最合适的决定。