clear: both写在父容器上完全无效，它只作用于自身且必须是块级、同级、紧邻浮动元素的后续兄弟；伪元素清除需content:""、display:table、clear:both三者齐全；现代推荐用display:flow-root。
clear: both 写在父容器上完全没用
这是最常踩的坑：clear: both 作用对象是「自身」，不是子元素。给父容器写 .parent { clear: both; }，浏览器会解析但不执行任何清除行为——它只会在父容器自己前面有浮动兄弟时换行，对内部浮动子项的高度计算毫无影响。父容器依然看不见浮动子项，高度还是 0。
目标元素不是块级盒，clear 就不生效
clear: both 只对参与块格式化上下文（BFC）的块级元素生效。如果目标元素是 inline、inline-block、flex 或 grid 子项，哪怕写了 clear: both，computed styles 里也看不到效果。
- 检查 DevTools 中该元素的
display值，不是block或table？就先加display: block - 常见陷阱：
<p></p>标签被父级设了display: flex，导致它变成 flex item，自动失去块级流行为 - 伪元素
::after必须显式写display: table或display: block；display: inline（默认）下clear完全不触发
伪元素缺少 content: ""，整个清除就失效
伪元素是否渲染出来，取决于 content 属性。漏掉 content: "" 是最常见错误——没有它，::after 根本不生成，后续的 display 和 clear 全部无效。
- 必须三者齐全：
content: ""+display: table（或block）+clear: both - DOM 中不能插注释、空格、
display: contents容器，否则会断开“紧邻”关系，让清除失效 - 移动端 Safari 中若父容器有
-webkit-overflow-scrolling: touch，可能触发渲染 bug，导致清除元素被错误地提升到同一行
现代项目里更该盯住 display: flow-root
display: flow-root 是 W3C 明确定义的 BFC 触发方式，专为解决浮动塌陷而生。它不依赖额外节点、不裁剪内容、不干扰子元素布局，一行代码就能让父容器重新包含所有浮动子项。
- 兼容性已覆盖所有现代浏览器（Chrome 64+、Firefox 58+、Safari 15.4+、Edge 79+）
- 如果项目需支持 IE8–10，才考虑
clearfix；否则优先用flow-root - 真正容易被忽略的是：只要父容器用了
display: flex或grid，浮动子项本身就不生效——此时clear是无意义的，该用align-items或place-items控制对齐
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
