clear: both 在 ::after 上无效，主要因 content: ""、display: table（或 block）、clear: both 三者缺一；现代推荐用 display: flow-root 解决浮动塌陷。
clear: both 写在 ::after 上却没效果，大概率是三个条件缺一环
伪元素本身不会自动参与清除逻辑，clear: both 要起作用，必须同时满足：content: ""、display: table（或 display: block）、clear: both。漏掉任一个，浏览器就当它不存在。
最常见的是：content 被省略或写成 content: " "（带空格），导致伪元素根本不生成；或者 display 没显式设置，保留默认的 inline —— 而 clear 对 inline 元素完全无效。
-
content: ""必须存在，不能是none，也不能为空（即不写） -
display: table比display: block更稳妥：不继承line-height，避免意外高度，IE8+ 全兼容 - 别用
display: inline、display: table-cell或display: flex，它们都不响应clear
::after 伪元素不是“浮动清除器”，而是模拟一个块级兄弟节点
clear: both 的本意从来不是“清除浮动”，而是让“当前元素”避开前面所有浮动元素。伪元素 ::after 能撑开父容器，是因为它被插入到父容器末尾，成为一个**参与文档流的块级节点**，再靠 clear: both 强制下移到浮动下方，从而迫使父容器重新计算高度。
所以它生效的前提是：这个伪元素必须真实存在、是块级、且 DOM 位置确实在所有浮动子项之后。
- 如果父容器本身设置了
overflow: hidden或display: flex，可能提前触发 BFC 或改变渲染上下文，干扰伪元素定位 - 如果浮动子项被包在另一个未清除的子容器里（比如嵌套的
.sidebar），::after只能清外层，清不到内层浮动 - HTML 中的注释、换行、
display: contents容器会打断“紧邻兄弟”关系，导致clear只检查前一个节点，不往前追溯
现代项目里，display: flow-root 是更干净的替代方案
如果你的目标只是解决父容器因浮动塌陷而无高度的问题，display: flow-root 是目前语义最准确、副作用最小的解法。它不依赖伪元素、不引入额外渲染节点、也不裁剪溢出内容。
兼容性已足够好：Chrome 64+、Firefox 59+、Safari 15.4+、Edge 79+ 都支持。老浏览器回退时才需 ::after 方案。
-
display: flow-root是 W3C 明确定义的 BFC 触发方式，专为这类问题设计 - 一行代码：
.container { display: flow-root; }，父容器立刻包含所有浮动子项 - 不用操心
content、display、clear三者是否对齐，也避免了*zoom: 1这类过时 hack
容易被忽略的细节：浮动元素自己加 clear: both 完全没用
很多人把 clear: both 写在浮动元素自身上，比如 .item { float: left; clear: both; }。这不会影响父容器高度，也不会“清除”任何东西——clear 只对**紧跟其后的块级兄弟元素**生效，对浮动元素自己无效。
此时浏览器只是按规范处理：该元素先浮动，再尝试避开前面的浮动（但它前面可能根本没浮动兄弟），整个行为和父容器塌陷无关。
- 浮动元素加
clear，只会影响它和前一个同级浮动元素的相对位置（例如防止多个float: left堆叠在同一行） - 它仍然脱离文档流，父容器依然“看不见”它
- 真正要修复塌陷，得让父容器建立 BFC，或插入一个在它之后、参与流式布局的块级节点
display: flow-root，省去所有判断成本。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
