clear: both 有时无效是因为清除元素未参与文档流高度计算；伪元素::after比overflow:hidden更可靠因不裁剪绝对定位元素；Flex/Grid下无需清除浮动；现代推荐display: flow-root。
为什么 clear: both 有时根本不起作用
常见错觉是只要在浮动元素后面加一个 div 并设 clear: both 就能“清掉”浮动——但实际中父容器高度塌陷依旧存在。根本原因是：这个 clear 元素本身没参与文档流的“高度计算”，或者它被设置了 display: none、visibility: hidden、height: 0 等，导致无法撑开父容器。
实操建议：
- 确保清除元素是块级、可见、有默认
height（哪怕只是font-size: 0+line-height: 0） - 避免用
visibility: hidden替代display: none来“隐藏”清除元素——它仍占空间，但若父容器有overflow: hidden，可能意外裁剪 - 不要把
clear加在浮动元素自身上（如float: left; clear: both），这只会让它避开前面所有浮动，和“清除父容器浮动”无关
伪元素 ::after 清除法为何比 overflow: hidden 更可靠
overflow: hidden 确实能触发 BFC，从而包含浮动子元素，但它会意外截断 position: absolute 子元素的溢出部分，或掩盖 box-shadow、transform 位移后的视觉效果。
而 ::after 方案本质是插入一个“看不见但真实存在”的块级清除节点，不干扰其他渲染逻辑：
立即学习“前端免费学习笔记（深入）”；
.clearfix::after {
content: "";
display: table;
clear: both;
}
.clearfix {
*zoom: 1; /* IE6/7 hack */
}注意点：
-
display: table比block更稳妥——避免某些旧版浏览器中block节点因 margin 折叠导致清除失效 - 必须声明
content，否则伪元素不生成；值为空字符串即可，不要写content: " "（多一个空格可能引发行高问题） -
*zoom: 1是为兼容 IE6/7 的 hasLayout 触发，现代项目可省略
Flex 和 Grid 布局下还用得着清除浮动吗
完全不用。一旦父容器设了 display: flex 或 display: grid，子元素自动脱离传统文档流的浮动机制，float 属性对布局不再生效（仅影响文本环绕等少数行为）。
但陷阱在于：有人混用 float 和 flex，比如给 flex 容器里的某个子项加 float: right，期望它右对齐——结果是该子项脱离 flex 排列，可能覆盖其他内容或破坏对齐。
正确做法：
- 用
margin-left: auto实现 flex 末尾对齐 - 用
justify-content: space-between或flex-direction: row-reverse控制整体分布 - 如果真需要文字环绕图片，用
shape-outside+float，但容器本身别设 flex/grid
Vue/React 组件中动态插入浮动元素时的清除时机问题
当通过 v-if 或 useState 控制浮动元素显隐时，DOM 节点可能被销毁重建，导致原本附加在父容器上的 clearfix 类丢失，或伪元素未及时重绘。
更稳妥的方式是把清除逻辑“内聚”到组件内部，而不是依赖外部样式类：
.card {
display: flow-root; /* 原生 BFC，无需伪元素 */
}
/* 或 */
.card::after {
content: "";
display: table;
clear: both;
}关键提醒：
-
display: flow-root是最干净的现代解法，兼容 Chrome 58+、Firefox 53+、Safari 10.1+，但不支持 IE - 避免在组件 CSS 中用
overflow: hidden应对浮动，尤其当组件要支持阴影、动画位移或弹出菜单时 - 服务端渲染（SSR）场景下，伪元素清除法比 JS 插入清除节点更稳定，因为不依赖 DOM ready
清除浮动的本质不是“删掉浮动”，而是让父容器重新建立包含上下文。最容易被忽略的是：浮动本身没消失，只是你是否让容器“看见”它了。
