clear: both 放在最后一个子元素后无效，因为它只让该元素自身避开前面浮动，不参与撑高父容器；真正有效的是伪元素 clearfix（需 content、display、clear 三者齐全）或现代方案 display: flow-root。
clear: both 放在最后一个子元素后为什么无效
它根本不是“清除父容器浮动”的方案，而是让那个元素自己避开前面的浮动——但这个元素本身不参与撑高父容器，父容器依然塌陷。常见错误是：<div class="float"></div>
<div class="float"></div>
<div style="clear:both"></div>，页脚下来了，父 div 高度还是 0。
原因有三：
-
clear: both只影响自身上边界位置，不改变父容器的 BFC 状态，也不触发高度重计算 - 该元素必须是块级、未浮动、未脱离文档流，且 DOM 上紧邻前一个浮动兄弟——中间插个注释、换行空格或
display: contents容器都会断开“紧邻”关系 - 它对父容器完全无作用：给父容器写
clear: both是无效语法，浏览器直接忽略
::after 伪元素为什么能撑开父高
伪元素不是“清除”，而是靠在父容器末尾插入一个视觉不可见但参与盒模型的块级节点，再用 clear: both 让它下移，从而强制父容器重新包裹所有子项（含浮动）。
但必须同时满足三个条件，缺一不可：
-
content: ""不能省略，否则伪元素不生成 -
display: table或display: block——display: inline下clear不生效 -
clear: both必须最终生效，不能被!important覆盖或被更高级别规则拦截
标准写法：
.clearfix::after { content: ""; display: table; clear: both; }
现代项目里更推荐 display: flow-root
它不依赖伪元素、不触发重排、不裁剪溢出，专为创建无副作用的 BFC 设计，效果等同于 .clearfix，但一行 CSS 就搞定。
兼容性已足够宽：
- Chrome 64+、Firefox 59+、Safari 15.4+、Edge 79+
- 如需支持 IE11，可加回退：
.parent { display: flow-root; } @supports not (display: flow-root) { .parent { overflow: auto; } }
注意：overflow: hidden 虽也能触发 BFC，但会意外裁剪内容；overflow: auto 可能出现滚动条，都不是干净解法。
为什么伪元素比空标签“好”，但 still 不如 flow-root
伪元素不用污染 HTML 结构，复用方便；但它的 ::after 仍是一个匿名块级盒，参与布局计算，可能干扰 flex/grid 子项、继承 line-height、或在某些旧引擎中渲染异常。
display: flow-root 没有这些干扰——它只是让容器建立新 BFC，不新增盒、不设 content、不依赖 display 类型判断。真正失效的往往不是某一行写错，而是把“清除浮动”当成万能胶水，忽略了目标其实是“让父容器包含浮动子项”这个本质问题。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
