clear属性失效最常见的原因是未正确应用于浮动元素之后的块级非浮动元素；需确保其DOM位置在浮动元素之后、为块级且未脱离文档流，或改用BFC方案如display:flow-root。

clear 属性不起作用，最常见的原因是它没有被正确应用在“浮动元素之后”的那个元素上。clear 的作用是让当前元素避开前面的浮动元素，但它不会影响前面的浮动元素本身，也不会自动“清理”浮动带来的布局塌陷——它只对紧邻的、后续的块级元素生效，且前提是该元素本身是块级、未被浮动、且文档流位置确实在浮动元素之后。

确认 clear 元素处于浮动元素的文档流之后

HTML 结构必须保证 clear 所在的元素在 DOM 中位于浮动元素的后面。例如：

左浮动

右浮动

这里才能 clear 成功

如果把 .clear-both 写在两个浮动 div 之前，或者用 JS 动态插入到前面，clear 就完全无效——因为它在文档流中不“后于”浮动元素。

确保 clear 元素是块级且未浮动

clear 只对常规文档流中的块级元素起作用。以下情况会导致失效：

立即学习“前端免费学习笔记（深入）”；

• 元素设置了 float: left/right —— 浮动元素自身会脱离文档流，clear 对它无效；
• 元素是行内元素（如 <span></span>），未设置 display: block 或类似值；
• 元素设置了 position: absolute/fixed，也脱离了文档流。

✅ 正确做法：给 clear 元素加上 display: block（默认已有），且不浮动、不绝对定位。

Expanso yaml-to-json

使用 Expanso Edge 管道将 YAML 输入转换为 JSON 格式。

下载

检查父容器是否触发 BFC（更推荐的替代方案）

单纯依赖 clear 有时治标不治本。如果目标是让父容器包含所有浮动子元素（防止高度塌陷），更好的方式是让父容器形成 BFC：

• 设置 overflow: hidden（或 auto、scroll）；
• 设置 display: flow-root（现代标准，推荐）；
• 设置 float: left 或 position: absolute（但会改变父容器定位行为，慎用）。

这样就不需要额外加 clear 元素，布局更干净。

避免常见干扰：margin 折叠与 display 类型

有时候 clear 看似没反应，其实是被 margin 折叠“掩盖”了。例如：

浮动元素下方是一个 margin-top: 20px 的块元素，而它又恰好被 clear —— 但顶部外边距可能和父容器折叠，导致视觉上没空隙。

✅ 解决方法：

• 给 clear 元素加 padding-top 或 border-top 阻止 margin 折叠；
• 改用 display: table（也会创建 BFC 且不折叠 margin）；
• 直接使用 ::after 伪元素清除浮动（clearfix 方案），更可靠。