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/code/12093" title="CSS婚礼策划服务机构宣传网站模板"><img
src="https://img.php.cn/upload/webcode/000/000/018/178607072210981.jpg" alt="CSS婚礼策划服务机构宣传网站模板" ></a>
<div class="aritcle_card_info flexColumn">
<a href="/xiazai/code/12093" title="CSS婚礼策划服务机构宣传网站模板">CSS婚礼策划服务机构宣传网站模板</a>
<p>CSS婚礼策划服务机构宣传网站模板是一款适合提供婚礼策划和婚庆服务机构宣传网站模板下载。提示：本模板调用到谷歌字体库，可能会出现页面打开比较缓慢。</p>
</div>
<a href="/xiazai/code/12093" title="CSS婚礼策划服务机构宣传网站模板" 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 就成了遮掩真实问题的临时胶带。
