clear:both并非清除浮动，而是让当前块级元素上边界避开同级浮动兄弟；它不解决父容器塌陷，需用flow-root或bfc方案。
clear 属性本身不处理换行，它只控制元素外边距是否避开前面的浮动——很多人误以为给某个元素加 clear: both 就能“让后面内容换行”，其实只是让该元素自身下移，不与浮动并排。真正要解决的是父容器塌陷、后续内容错位、布局失控这些现象。
为什么 clear 必须写在浮动元素之后的兄弟元素上
clear 不作用于浮动元素自己，也不作用于父容器，它只影响**当前元素的外边距计算**：浏览器会在该元素上边距处插入足够空间，使其顶边落到所有左侧/右侧浮动元素的底边之下。
- 写在浮动元素自身上（如
.float { clear: both; }）完全无效——它没“前面的浮动”可避 - 写在父容器上（如
.parent { clear: both; }）也无效——clear不触发 BFC，父容器依然塌陷 - 必须是浮动元素的**下一个同级块级元素**，比如
<p class="intro">...</p>紧跟在<div class="float"> 后面，且该 <code>p设了clear: both - 若该兄弟元素是内联元素（如
span），clear无效，必须是display: block或table等参与块格式化上下文的类型 - 关键三要素缺一不可：
content: ""（生成伪元素）、display: table（比block更稳妥，天然创建 BFC，不继承 line-height 导致额外高度）、clear: both - IE8+ 兼容写法用单冒号：
:after；仅需支持 IE9+ 可用双冒号::after - 不要漏掉
display: table—— 如果只写content: ""和clear: both，伪元素不参与布局，清除失效 - 无需
zoom: 1或height: 0，display: table已覆盖 IE8 hasLayout 需求 - 只需一行：
.container { display: flow-root; }，父容器立刻正确包含所有浮动子元素 - 不裁剪溢出内容（对比
overflow: hidden）、不影响position: fixed、不强制滚动条 - 2026 年主流浏览器已全面支持，但 iOS Safari 15.4 之前、Android WebView 旧版本仍不支持；查 caniuse.com 确认项目目标环境
- 不能和
display: inline混用；若父容器原本是inline-block，改用flow-root会变成块级，可能影响行内布局
clearfix 伪元素法为什么是现代首选
它用 ::after 在父容器内部末尾插入一个“看不见但起作用”的块级占位，既避免 DOM 污染，又精准触发清除逻辑。
display: flow-root 是最干净的替代方案，但要注意兼容断层
这是 CSS Display Module Level 3 明确定义的值，专为包裹浮动而生，语义清晰、零副作用。
真正容易被忽略的点是：清除浮动从来不是为了“取消 float”，而是让父容器重新获得高度控制权。选 clearfix 还是 flow-root，取决于你是否愿意为老浏览器多写几行兼容代码——而这个决策，往往在项目初始化时就该定下来，而不是等 QA 提出“iOS 上卡片高度不对”才回头补。
