为什么在CSS里浮动元素后的第一个元素需要clear？

clear属性必须加在浮动元素之后的标准流元素上，因其作用是让当前元素避开浮动元素占据的行内空间，而非清除浮动或修复父容器塌陷；它只对块级元素生效，现代布局中应优先使用Flexbox或Grid替代float+clear。

clear 属性为什么必须加在浮动元素之后的元素上

因为 clear 的作用不是“清除前面的浮动”，而是“让当前元素避开浮动元素占据的行内空间”。它只对自身生效，不改变前面已浮动的元素，也不影响父容器高度计算。

常见错误是给浮动子元素自己加 clear —— 这毫无意义：浮动元素已经脱离文档流，clear 对它不起作用；真正需要被“推下来”的，是紧随其后的标准流元素（比如段落、按钮、下一个 div）。

• 如果浮动元素后面是另一个浮动元素，clear 通常不需要——它们彼此并排或换行由 float 自身控制
• 如果后面是标准流块级元素（如 p、section），不加 clear: both 就会“钻进”浮动元素下方空白处，造成视觉重叠或错位
• clear: left 只防左浮，clear: right 只防右浮；实际布局中几乎总用 clear: both，避免漏判

父容器高度塌陷和 clear 没有直接关系

很多人误以为加了 clear 就能修复父容器高度为 0 的问题 —— 这是典型混淆。父容器塌陷是因为子元素浮动后脱离文档流，而 clear 是作用在后续兄弟元素上的，它不“拉高”父容器，也不触发 BFC。

举个例子：.parent 里有两个 float: left 的子元素，后面跟一个 <p style="clear: both">文本</p><p><span>立即学习</span>“<a href="https://pan.quark.cn/s/cb6835dc7db1" style="text-decoration: underline !important; color: blue; font-weight: bolder;" rel="nofollow" target="_blank">前端免费学习笔记（深入）</a>”；</p><div class="aritcle_card flexRow"> <div class="artcardd flexRow"> <a class="aritcle_card_img" href="/xiazai/shouce/1862" title="使用HTML,CSS,JavaScript开发Android应用程序 英文文字pdf版附源文件"><img src="https://img.php.cn/upload/manual/000/000/010/170901721079108.gif" alt="使用HTML,CSS,JavaScript开发Android应用程序 英文文字pdf版附源文件" onerror="this.onerror='';this.src='/static/lhimages/moren/morentu.png'" ></a> <div class="aritcle_card_info flexColumn"> <a href="/xiazai/shouce/1862" title="使用HTML,CSS,JavaScript开发Android应用程序 英文文字pdf版附源文件">使用HTML,CSS,JavaScript开发Android应用程序 英文文字pdf版附源文件</a> <p>如果你了解HTML，CSS和JavaScript，您已经拥有所需的工具开发Android应用程序。本动手本书展示了如何使用这些开源web标准设计和建造，可适应任何Android设备的应用程序 - 无需使用Java。您将学习如何创建一个在您选择的平台的Andr​​oid友好的网络应用程序，然后转换与自由PhoneGap框架到一个原生的Andr​​oid应用程序。了解为什么设备无关的移动应用是未来的潮流，并开始构建应用程序，提供更</p> </div> <a href="/xiazai/shouce/1862" title="使用HTML,CSS,JavaScript开发Android应用程序 英文文字pdf版附源文件" class="aritcle_card_btn flexRow flexcenter"><b></b><span>下载</span> </a> </div> </div> —— 这个 p 是被推下来了，但 .parent 的高度依然为 0，下面的兄弟容器照样会往上顶。

• 修复父容器高度，得用 overflow: hidden、display: flow-root 或 ::after 伪元素等真正闭合 BFC 的方式
• clear 解决的是“后续元素被浮动挤占位置”的问题，不是“父容器没高度”的问题
• 两者常同时出现，但成因和解法完全不同，混用会导致调试时反复踩坑

现代布局中 clear 的使用频率已大幅下降

Flexbox 和 Grid 成为主流后，float 基本退出布局场景，clear 自然也退居二线。目前它主要出现在三类地方：

• 老项目维护：仍存在大量基于 float 的导航栏、图文混排
• CSS 重置或 normalize 中保留兼容性规则（如 hr 默认带 clear: both）
• 某些 CMS 输出 HTML 不可控，需用 clear 强制隔离用户插入的浮动内容

新项目若非必要，别为了“清浮动”而硬用 float + clear 组合——用 display: flex 或 display: grid 更直接、更可靠。

容易被忽略的 clear 触发条件

clear 只在块级盒（block-level box）上生效，对 inline、inline-block 元素无效。这也是为什么常看到有人给 span 加 clear: both 却没反应。

• 必须确保目标元素是块级（默认如 div、p、section，或显式设 display: block）
• 如果元素被 float 了，clear 仍有效，但它作用的是该浮动元素自身的“下边缘”，而非父容器
• 当父容器设置了 display: flow-root，内部浮动不会影响外部，此时 clear 往往多余

真正要留意的，不是“要不要加 clear”，而是先确认：这里是否真用了 float？后续元素是不是标准流？父容器是否需要撑高？三个问题答错一个，clear 就成了遮掩真实问题的临时胶带。