clear: both只作用于直接前驱浮动兄弟，不统计所有浮动元素；它仅确保当前元素上边缘避开前一个同级浮动元素，而非全部浮动块。
clear: both 只对紧邻的同级浮动兄弟生效
连续多个 float: left 元素排成一行时，clear: both 并不会让后续元素“跳到所有浮动行下方”，它只检查**前一个同级兄弟元素是否浮动**。如果前一个是浮动块，就下移；如果前一个不是浮动块（比如是普通 p 或已清除过的 div），那 clear: both 就不触发。
常见错误现象：写了 4 个 float: left 的 .item，然后在第 5 个元素上加 clear: both，结果它还是贴着第 4 个右边出现——因为第 4 个是浮动的，但第 5 个和它之间没有其他非浮动兄弟隔开，浏览器认为“它前面只有这一个浮动兄弟”，于是只确保自己左边空，而右边仍可并排。
-
clear: both不统计“前面有多少个浮动”，只看“前一个同级兄弟是否浮动” - 若想强制换行，必须确保目标元素的**直接前驱**是浮动元素（且无其他干扰）
- 如果中间夹了文本节点、
inline元素或display: inline-block，clear会失效——它只作用于块级盒（display: block/table等）
clear: left 和 clear: right 在多浮动布局中的实际行为差异
当页面中同时存在 float: left 和 float: right 元素时，clear: left 并不等于“清掉所有左浮”，而是“我这个元素的左边不能有浮动，否则我就往下挪”。右侧浮动完全不影响它。
典型踩坑场景：一个右置侧边栏（float: right）+ 几个左浮主内容，你在主内容末尾加 clear: left，结果它被卡在侧边栏下方、主内容右侧空白处——因为它的左边确实没浮动了，但右边侧边栏还在，而 clear: left 不管右边。
-
clear: left→ 只检测左侧是否有浮动兄弟，右侧自由 -
clear: right→ 同理，只拦右侧，左侧不管 -
clear: both是唯一能同时避开左右浮动的选择，尤其适合不确定浮动方向的混合布局
伪元素 clearfix 的原理与兼容性边界
.clearfix::after 能生效，本质是插入了一个**块级、无内容、带 clear: both 的匿名盒子**，它成为浮动元素的最后一个同级兄弟，从而把父容器底部“拉下来”。但这依赖两个前提：
如果你了解HTML，CSS和JavaScript，您已经拥有所需的工具开发Android应用程序。本动手本书展示了如何使用这些开源web标准设计和建造，可适应任何Android设备的应用程序 - 无需使用Java。您将学习如何创建一个在您选择的平台的Android友好的网络应用程序，然后转换与自由PhoneGap框架到一个原生的Android应用程序。了解为什么设备无关的移动应用是未来的潮流，并开始构建应用程序，提供更
- 父容器必须是块级上下文（
display: block或类似），否则::after无法生成块盒 -
content: ""必须配合display: block，否则clear不起作用（display: inline下clear被忽略） - IE8 及更早版本不支持
inherit值，但clear: both本身兼容到 IE6+
现代项目里，display: flow-root 是更干净的替代方案，但它在 IE11 及以下不可用——如果还要支持 IE11，clearfix 仍是稳妥选择。
为什么 overflow: hidden 不是万能解法
overflow: hidden 触发 BFC，确实能让父容器包住浮动子项，但它附带副作用：任何溢出内容（如 position: absolute 的下拉菜单、阴影、transform 位移的弹窗）都会被静默裁剪。
调试时容易误判：看到父容器高度正常了，就以为问题解决，结果点击按钮后下拉框消失——不是 JS 错了，是 overflow: hidden 把它剪掉了。
- 用
overflow: auto替代可避免裁剪，但可能意外触发滚动条（尤其在移动端） -
display: flow-root没有裁剪副作用，是当前最优解，但需确认目标环境是否支持 - Flex/Grid 布局中设
clear完全无效——子元素的float在 flex 容器里基本被忽略
真正容易被忽略的是：clear 属性从不修复父容器塌陷，它只调整兄弟元素位置；塌陷问题必须靠 BFC 或现代布局机制来解决。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
