clear属性只对浮动元素之后的同级块级兄弟元素生效，加在父容器或浮动元素自身均无效；现代推荐用display: flow-root触发BFC解决塌陷。
clear 属性只对后续兄弟元素有效
很多人写 clear: both 却没效果，是因为它根本不能加在父容器上——clear 只作用于自身是块级盒、且位于浮动元素「之后」的兄弟元素。比如你有三个 float: left 的子项，但父容器里没放第四个非浮动元素，那 clear 就无处生效。
常见误用场景：
- 给父容器直接写
clear: both—— 语法合法，但逻辑无效 - 把
clear: left写在浮动元素自己身上 —— 浮动元素已脱离文档流，clear对它不起作用 - 用
display: inline-block元素接在浮动后并加clear—— 它不是块级盒，clear被忽略
clearfix 是为父容器“补高度”设计的
当你发现父容器高度塌陷（比如背景色没显示、边框包不住子项），而子项又全是 float，这时该用 clearfix。它的本质不是“清浮动”，而是通过 ::after 伪元素插入一个块级、BFC 化、带 clear: both 的占位符，强制父容器重新计算高度。
可靠写法必须满足三点：
立即学习“前端免费学习笔记（深入）”；
-
content: ""不能省，否则伪元素不渲染 -
display: table比display: block更稳——它天然触发 BFC，避免基线间隙和 IE 老版本 bug - 只写
::after就够了，::before在清除场景中纯属冗余（除非你要防外边距合并）
现代项目优先考虑 display: flow-root
如果你只是想让父容器包裹浮动子项，display: flow-root 是比 clearfix 更干净的替代方案。它一行代码创建独立 BFC，不依赖伪元素、不增加选择器权重、不干扰继承（除了 font-size 等极少数属性）。
但要注意兼容性底线：
- Chrome 64+ / Firefox 59+ / Safari 15.4+ / Edge 79+ 支持；IE 完全不支持
- 若项目仍需兼容 Safari clearfix 仍是兜底首选
-
flow-root对position: fixed子元素定位更友好，而overflow: hidden会切断其相对于视口的锚定
flex/grid 布局下不需要任何清除手段
一旦父容器设了 display: flex 或 display: grid，子元素即使写了 float: left，浮动行为也会被忽略——它们变成普通 flex item 或 grid item，不再脱离文档流。此时加 clearfix 或 clear 不仅无效，还可能掩盖布局误用问题。
排查建议：
- 检查是否漏写了标准声明，比如只写了
display: -webkit-flex没写display: flex - 确认子元素没意外继承了
float（来自重置样式或第三方 CSS） - 用浏览器开发者工具看 computed 样式，确认
float是否真的被禁用
clearfix 和 flow-root 都不管。要根治，得从放弃 float 布局本身开始。 
