display: flow-root是首选方案，一行代码即可创建BFC解决浮动塌陷，不裁剪内容、不污染HTML；clear: both加在父元素上无效，因其仅作用于自身、避开前序浮动兄弟，不影响内部浮动子项。
直接用 display: flow-root，现代项目里一行就能解决，不用 hack、不裁内容、不污染 HTML。
为什么 clear: both 加在父元素上完全无效
clear: both 的作用对象是「自己」，不是子元素。给父容器写 .parent { clear: both; }，它只尝试避开前面的浮动兄弟元素，对内部浮动子项毫无影响——父容器依然看不见子项，高度还是 0。
真正起效的 clear: both 必须出现在浮动元素之后、且仍在同一父容器内的块级兄弟元素上。比如：
<div class="float-left"></div> <div style="clear:both"></div>
但这种写法污染 HTML，不推荐。
立即学习“前端免费学习笔记（深入）”；
- 伪元素
::after能模拟这个“之后的兄弟”，但必须同时满足三项：content: ""、display: table（或block）、clear: both - 漏掉
content: ""是最常见错误——没有内容，伪元素根本不渲染 - 如果父容器自身已设
overflow: hidden或auto，可能截断伪元素的清除行为，导致失效
display: flow-root 怎么用才生效
它专为解决浮动塌陷而设计，语义明确、无副作用、一行生效。但必须作用在**直接包裹浮动子元素的那个父容器**上。写在祖父层、子元素本身或兄弟容器上都无效。
- 父容器本身是
inline元素（如span）时，需先加display: block或display: inline-block，否则flow-root不起作用 - 若父容器已是
display: flex或display: grid，子元素的float会自动失效，此时加flow-root不仅多余，还可能干扰调试 - Chrome 64+ / Firefox 58+ / Safari 15.4+ / Edge 79+ 均已原生支持，2026 年可视为事实标准
overflow: hidden 为什么经常踩坑
它确实能触发 BFC，让父容器高度正常计算，但它不是“修复”，而是“遮盖”：所有超出边界的子内容都会被裁剪。
-
position: absolute的弹层（如下拉菜单、日期选择器）、box-shadow、transform位移后的伪元素，全会被截断 -
overflow: visible不触发 BFC，写了等于没写 -
overflow: auto在某些旧版 Safari 中会无故显示滚动条，哪怕内容根本没溢出 - 如果父容器本身已用
overflow: hidden实现遮罩动画，再靠它“顺便”清浮动，逻辑就混了
真正容易被忽略的是：BFC 隔离是局部的。你在父容器上加了 display: flow-root，只管住它内部的父子/兄弟关系，但它和外部兄弟容器之间，只要还在同一个上级 BFC 里，margin 合并、布局穿透等问题仍可能发生。
