浮动图片后文字不环绕或父容器塌陷，需区分处理：对后续块级元素加clear: both清除浮动影响；对父容器用clearfix或display: flow-root使其包含浮动子元素。
浮动图片后文字不环绕、错位或塌陷怎么办
多数情况是父容器没处理浮动溢出，导致后续元素被挤到浮动元素下方，或父容器高度塌陷成 0。这不是图片本身的问题，而是 float 的脱离文档流特性引发的连锁反应。
核心思路只有两个：清除浮动影响，或让父容器重新“感知”浮动子元素的高度。
- 用
clear是针对**紧邻浮动元素之后的某个块级元素**，让它避开浮动区域（比如在图片后加一个<div style="clear: both"></div>） - 用
clearfix是针对**浮动元素的父容器**，让它包裹住内部浮动子元素，避免塌陷 - 现代项目优先用
display: flow-root替代clearfix，更简洁且无副作用
clear 属性只能清“后面”的元素，不能救父容器
clear 的作用对象是它自己所在的元素，不是它的父级。常见误用是给图片加 clear: left，这反而会让图片自己下移，完全偏离环绕意图。
正确用法是：图片浮动后，希望下一段文字从新行开始、不绕图？那就给那段文字加 clear: both：
立即学习“前端免费学习笔记（深入）”；
<img src="a.jpg" style="float: left; margin-right: 12px;"> <p>这段文字会绕图</p> <p style="clear: both;">这段文字不会绕图，会从下一行完整开始</p>
注意：clear 对 inline 元素无效，只对块级元素（如 p、div、section）起作用。
clearfix 的经典写法和为什么需要它
当图片浮动、文字环绕，但父容器（比如一个 <article>）高度为 0，导致背景色消失、边框不包住内容、后续元素上移——这就是典型的父容器塌陷，必须用 clearfix。
最兼容的写法（支持 IE8+）：
.clearfix::before,
.clearfix::after {
content: "";
display: table;
}
.clearfix::after {
clear: both;
}
关键点：
-
::before创建伪元素并设为table，是为了防止顶部外边距塌陷（margin collapse） -
::after必须存在且clear: both，才能撑开父容器高度 - 只给父容器加
class="clearfix"，不要加在图片或文字上
现代替代方案：display: flow-root 更干净
如果不需要兼容 IE，直接用 display: flow-root 是最优解。它会让容器建立一个新的 BFC（块级格式化上下文），天然包含内部浮动元素，无需伪元素、无额外 DOM、无样式污染。
示例：
<article style="display: flow-root; background: #f5f5f5;"> <img src="a.jpg" style="float: left; margin-right: 12px;"> <p>文字正常环绕，article 高度也正确包含了图片和文字</p> </article>
注意：flow-root 不会影响子元素的布局模式（比如不会让 inline 子元素变块），这点比 overflow: hidden 更安全；但它不支持 IE，Safari 从 15.4 才完全稳定，上线前建议查 caniuse。
浮动环绕问题真正难的从来不是怎么清，而是分不清该清谁、为什么要清——父容器塌陷和兄弟元素错位，是两类不同根源的问题，混用 clear 和 clearfix 只会让布局越来越不可控。
