clear: both 仅对浮动元素的同级后续块级兄弟元素生效，不作用于浮动元素自身或父容器；其原理是强制该元素避开左右浮动，而非修复浮动或撑开父容器。

clear: both 是唯一能同时应对左浮、右浮、混合浮动的可靠取值，但必须用在正确的位置和元素上——它不作用于浮动元素自身，也不作用于父容器。

为什么 clear: both 加在浮动元素自己身上无效

浮动元素已脱离文档流，clear 的计算逻辑只对非浮动的块级兄弟元素生效。比如写 .item { float: left; clear: both; }，这个 clear 完全被忽略。

• 浏览器会直接跳过该声明，computed styles 中也看不到 effect
• 即使你给一个 float: right 元素加 clear: both，它照样右浮，不会下移
• 真正起效的前提：该元素是块级（display: block 或 table 等），且是浮动元素的同级后续兄弟

clear: left 和 clear: right 的实际行为差异

clear: left 不是“清除左边所有浮动”，而是“我这个元素左边不能有浮动，否则我就往下挪，直到左边空了为止”。同理 clear: right 只管右边。

使用HTML,CSS,JavaScript开发Android应用程序 英文文字pdf版附源文件

如果你了解HTML，CSS和JavaScript，您已经拥有所需的工具开发Android应用程序。本动手本书展示了如何使用这些开源web标准设计和建造，可适应任何Android设备的应用程序 - 无需使用Java。您将学习如何创建一个在您选择的平台的Andr​​oid友好的网络应用程序，然后转换与自由PhoneGap框架到一个原生的Andr​​oid应用程序。了解为什么设备无关的移动应用是未来的潮流，并开始构建应用程序，提供更

下载

• 若布局中只有 float: left 元素，clear: left 和 clear: both 效果一样
• 但若有 float: right 侧边栏，仅用 clear: left 可能让元素与右侧浮动并排，造成错位
• clear: both 是最稳妥的选择，尤其当浮动方向不确定或混用时

常见错误位置：父容器上写 clear: both

父容器上写 .parent { clear: both; } 是语法合法但语义错误——浏览器直接忽略该声明，因为 clear 不影响子元素的浮动状态，也不触发 BFC。

• 想让父容器包住浮动子项？这不是 clear 的职责，该用 display: flow-root 或 overflow: hidden
• 在最后一个浮动子元素后加一个空 div 并设 clear: both 虽然有效，但冗余，现代项目应避免
• Flex/Grid 布局中给子项设 clear 是无效劳动，浮动基本被忽略

调试时元素没下移？先查这三件事

如果设置了 clear: both 却没看到预期效果，别急着改 CSS，先看 computed styles：

• 目标元素是否为块级？display: inline、inline-block、flex 子项等都不响应 clear
• 它是否真是浮动元素的同级后续兄弟？嵌套层级错一层就失效
• 前面是否有其他浮动元素被遗漏？比如隐藏的 img 或伪元素也参与浮动计算

真正容易被忽略的是：清除浮动不是“修复”浮动，而是控制后续块级元素的位置；父容器塌陷问题，得靠 BFC 解决，不是靠 clear。

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！