clear属性实际是“避开浮动兄弟”而非“结束环绕”，它仅对紧邻的前一个浮动兄弟元素生效，且只作用于块级元素；现代推荐用display: flow-root创建bfc自动包裹浮动。
clear属性不是“结束环绕”，而是“避开浮动兄弟”
很多人以为给某个 <p></p> 加 clear: both 是为了“让文字环绕在这里停止”，其实不是。它只是告诉这个 <p></p>：“你得等前面紧挨着的浮动元素（且必须是文档流中前一个兄弟）完全腾出左右空间后，才能开始渲染”。如果前面根本没有浮动元素，或者中间隔了一个普通 <div>，那 <code>clear 就没作用——文字照样可能卡在右侧空白处。
为什么加了 clear: both 文字还卡在浮动右边？
这是最常踩的坑，原因很具体：
- 目标元素前面**没有浮动兄弟元素**（比如浮动图在
<section></section>里，而<p></p>在另一个<section></section>里） - 浮动元素和目标元素之间插了一个**非浮动、非空的块级元素**（如
<div></div>），clear不会跨过它去追溯更早的浮动 - 浮动元素本身被设置了
display: none、position: absolute或在 Flex 容器里——这些情况下它不参与文档流，clear视而不见 - 目标元素是内联元素（如
<span></span>、<em></em>），clear对它完全无效
clear: left 和 clear: both 的实际差别
区别不在“力度”，而在触发条件和留白逻辑：
-
clear: left：只要左侧没float: left元素就停，右侧有右浮也不管——适合单左浮广告后接正文 -
clear: both：必须左右两侧都“空”才开始渲染；哪怕页面只有左浮，它也会多等一段右侧安全区，造成额外空白 - 两者都只对块级元素生效，且只看“紧邻的前一个兄弟”是否浮动
现代写法：用 display: flow-root 替代逐个加 clear
如果你只是想让整个段落区域老老实实从浮动下方顶格开始，而不是每个 <p></p> 都手动加 clear，直接给父容器设 display: flow-root 更干净：
.article-content {
display: flow-root;
}
它会创建 BFC，自动包裹内部浮动元素，后续内容自然从下方开始，不受浮动干扰。兼容性到 Chrome 58+/Firefox 53+/Safari 10.1+，2026 年已无顾虑。唯一要注意的是：它不解决父容器高度塌陷以外的问题，比如你想让某一段文字刻意绕过浮动图片，那还是得用 float + margin 控制。
