浮动如何清除？

float导致父容器高度塌陷是因为浮动元素脱离文档流，父容器无法感知其高度；最稳妥清除法是用::after伪元素触发BFC，如.clearfix::after{content:"";display:table;clear:both}。

为什么 float 会导致父容器高度塌陷？

当子元素用了 float: left 或 float: right，它会脱离普通文档流，父容器就“看不见”它了，于是计算高度时直接忽略——结果就是父容器高度变成 0，背景、边框、后续元素都会错位。

最稳妥的清除方式：用 ::after 伪元素触发 BFC

这是目前兼容性好、无侵入、不加空标签的主流方案。核心是让父容器创建一个新的块级格式化上下文（BFC），从而包含浮动子元素。

实操写法：

.clearfix::after {  content: "";  display: table;  clear: both;}

使用时只要给浮动元素的父容器加上 class="clearfix" 即可。

立即学习“前端免费学习笔记（深入）”；

• display: table 是关键，它让伪元素成为一个匿名表格单元，能自然撑开父容器
• 不用 display: block + clear: both，因为纯块级元素在某些老浏览器中仍可能无法完全撑高
• IE8+ 全支持；IE6/7 需额外加 *zoom: 1 触发 hasLayout

现代项目优先用 display: flow-root

这是 CSS 新增的标准属性，专门用来创建 BFC，语义清晰、代码极简，且不影响布局流。

直接给父容器设置：

.container {  display: flow-root;}

优势明显：

• 一行解决，无需伪元素或额外 class
• 不会像 overflow: hidden 那样意外裁剪子元素的 position: absolute 或阴影
• Chrome 64+、Firefox 58+、Safari 12.1+、Edge 79+ 均支持；如需兼容 IE，不能单独依赖它

哪些“清除法”现在该避免？

有些老办法看似简单，但副作用明显，容易埋坑：

• overflow: hidden 或 overflow: auto：可能隐藏子元素的 box-shadow、transform 溢出部分，或触发不必要的滚动条
• 在 HTML 里加空 <div style="clear:both"></div>：污染结构、增加无意义 DOM 节点，维护成本高
• float 父容器本身：会让父容器也脱离文档流，引发连锁错位，基本等于把问题往后推

浮动本身已是过时布局手段，清除只是补救；真正要注意的是——别在 Flex 或 Grid 容器里还用 float，那会直接失效或产生不可预期行为。