display: flow-root 是解决浮动塌陷的现代首选方案，专为触发bfc设计，不裁剪绝对定位元素且不影响其他渲染行为；仅当需兼容ie11或无法修改html时才用clearfix。
display: flow-root 是现代项目的默认选择
只要目标环境不包含 IE11 及更老浏览器（比如当前主流的 Chrome 64+、Firefox 58+、Safari 15.4+、Edge 79+），display: flow-root 就该直接写进 CSS，不用犹豫。
它专为解决浮动塌陷而设计：一行声明触发 BFC，父容器立刻包含所有浮动子元素，背景、边框、后续兄弟元素全部恢复正常。没有伪元素、不裁剪 position: absolute 弹层、不干扰 margin 合并以外的渲染行为。
常见误判点：
-
overflow: hidden虽也能触发 BFC，但会意外裁剪下拉菜单、tooltip、阴影甚至 fixed 导航栏——尤其在移动端 WebView 中问题更明显 -
display: flex或display: grid容器里加flow-root没必要，因为子项本就不脱离文档流，浮动属性会被忽略 -
flow-root会重置相邻块级元素的 margin 折叠，如果页面依赖外边距合并（如段落间距），需额外调整
clearfix::after 仅用于兼容性兜底
只有两种情况才需要它：必须支持 IE11 或更低版本；或嵌入无法修改 HTML 结构的第三方内容（如 CMS 输出、邮件模板）。
真正可靠的写法只有一种，缺一不可：
-
content: ""—— 漏掉就等于没写，伪元素根本不会生成盒模型 -
display: table—— 比block更稳妥，避免旧版 Safari/UC 浏览器对 clear 的解析偏差 -
clear: both—— 这才是清除动作本身，不是装饰 -
height: 0—— 移动端部分老内核（如旧版 QQ 浏览器）需要显式设为 0，否则可能误算高度
别用 ::before，它插在浮动元素之前，对清除无效；也别混用 zoom: 1 或双伪元素，IE8+ 已足够，多余代码只会增加维护负担。
clear: both 加在浮动元素自身上完全无效
这是最常踩的坑：.item { float: left; clear: both; } 看似“保险”，实则毫无作用。
clear 的作用对象是「当前元素自身」，不是它的子元素。一个已脱离文档流的浮动元素，浏览器根本不按 normal flow 规则计算它的位置，clear 自然失效。
真正起效的位置，必须是浮动流结束后的第一个非浮动、块级、文档流内元素。比如：
- 手动加空标签：
<div style="clear:both"></div> - 用伪元素模拟这个“清道夫”：
.clearfix::after - 但绝不能加在父容器 CSS 里写
clear: both—— 它只会尝试避开前面的浮动兄弟，对内部子项无影响
还在用 float 做布局？这才是根本问题
clearfix 和 flow-root 都只是补救措施。它们解决的是“浮动导致父容器塌陷”，但不解决“为什么还要用 float”。
如果父容器已是 display: flex 或 display: grid，子元素的 float 属性会被浏览器忽略——这不是 bug，是规范行为。此时加 clearfix 不仅无效，还会掩盖布局逻辑混乱的事实。
真正容易被忽略的是：很多团队把 clearfix 当成“安全补丁”到处贴，却没意识到它暴露的是布局模型陈旧。该重构的不是类名，是 float 本身。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
