display: flow-root比overflow: hidden更安全，因其触发bfc时完全保留溢出内容可见性，不裁剪下拉菜单、tooltip、阴影或transform动画溢出部分，而后者会强制裁剪所有超出边界的元素。
display: flow-root 是最快解法，一行声明即可包裹所有浮动子元素，不加额外标签、不裁剪弹层、无副作用。
为什么 display: flow-root 比 overflow: hidden 更安全？
两者都触发 BFC，但关键差异在溢出处理：
-
overflow: hidden会裁剪position: absolute下拉菜单、transform位移的 tooltip、阴影或动画溢出部分 -
display: flow-root创建 BFC 的同时完全保留溢出内容可见性 - 兼容性上，
flow-root支持 Chrome 64+ / Firefox 58+ / Safari 15.4+，IE11 及更旧版本需降级
.clearfix::after 必须写对的三项属性
老项目兼容 IE11 或 Safari 14– 时仍需它，漏任一都会失效：
-
content: ""—— 必须是空字符串，写成" "会多一个空白字符导致换行 -
display: table—— 不能用block或inline-block，否则 IE8 下清除失败 -
clear: both—— 这才是真正执行清除动作的核心
完整写法：
.clearfix::after { content:""; display: table; clear: both; }记得给父容器加 class="clearfix"，否则等于没写。三列等宽浮动时，width 别硬写 33.33%
小数像素四舍五入会导致第三列换行，这不是 bug，是渲染精度问题：
- 用
width: calc(100% / 3)替代33.33%，计算更精确（IE9+ 支持） - 必须配
box-sizing: border-box，否则 padding/border 会撑出容器 - 列间距改用左右
padding，并从calc中扣除，例如width: calc(100% / 3 - 20px)（对应padding: 0 10px）
真正容易被忽略的是：只要父容器用了 display: flex 或 grid，子元素的 float 就完全失效 —— 此时再套 clearfix 或 flow-root 不仅多余，还可能干扰布局逻辑。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
