clear属性仅对非浮动块级兄弟元素生效，不能作用于浮动元素自身；其作用是让元素避开同侧浮动，而非清除浮动；父容器塌陷需用bfc方案如display: flow-root或伪元素clearfix，而非clear。
clear属性只对非浮动块级兄弟元素生效
它不是给浮动元素自己加就能“清掉”的开关。clear: both 加在 float: left 的元素上完全无效——因为浮动元素已脱离文档流，clear 的计算逻辑不作用于自身。真正起效的场景是：一个**非浮动的块级元素**，紧跟在浮动元素后面，且和它是**同级兄弟**。
常见错误现象：
- 给父容器写
.parent { clear: both; }—— 浏览器直接忽略，语法错误 - 给浮动子项写
.item { float: left; clear: both; }—— 无任何布局变化 - 给
display: inline或display: flex子项设clear—— 被忽略，必须是display: block或table等块级盒
clear: left / right / both 的实际行为差异
clear: left 不是“把左边的浮动干掉”，而是“我这个元素的左边不能有浮动，否则我就往下挪，直到左边空了为止”。同理，clear: right 只管右边。而 clear: both 是同时检查左右两侧，只要任一侧有浮动，就继续下移，直到两边都空。
使用场景：
如果你了解HTML，CSS和JavaScript，您已经拥有所需的工具开发Android应用程序。本动手本书展示了如何使用这些开源web标准设计和建造，可适应任何Android设备的应用程序 - 无需使用Java。您将学习如何创建一个在您选择的平台的Android友好的网络应用程序，然后转换与自由PhoneGap框架到一个原生的Android应用程序。了解为什么设备无关的移动应用是未来的潮流，并开始构建应用程序，提供更
- 单侧清除（如仅防左浮动侧边栏干扰）可用
clear: left - 存在
float: right元素时，只用clear: left可能导致错位，此时必须用clear: both - 不确定浮动方向或混合浮动时，
clear: both是最稳妥的选择
想让父容器包住浮动子项？clear属性根本做不到
clear 属性本身不触发 BFC（块格式化上下文），所以它无法让父容器感知浮动子项高度。你在最后一个浮动子元素后加一个 <div style="clear: both;"></div>，只是把那个 div 推下去了，父容器依然塌陷。
现代项目中应优先用：
-
display: flow-root—— 触发 BFC，无裁剪副作用，语义干净 - 伪元素
.clearfix::after—— 必须带content: ""和display: table（比block更兼容旧 Safari） - 避免用
overflow: hidden—— 它虽能触发 BFC，但会静默裁掉position: absolute弹层、阴影、transform位移内容
调试时元素没下移？先看 computed styles 中 display 是否为块级
clear 只对块级元素有效。如果设置了 clear: both 却没反应，打开开发者工具检查该元素的 display 计算值 —— 若是 inline、flex、grid 或 none，clear 就被忽略。
容易被忽略的点：
-
clear的底层机制是插入一段“清除空间”，不是靠 margin 拉下来的；这段空间独立计算，不影响原有 margin 值 - Flex/Grid 布局中加
clearfix是无效劳动——子元素的float基本被忽略 - 新项目尽量用
display: flex或display: grid替代浮动布局，这时根本不需要清浮动
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
