浮动图片后文字不环绕或父容器塌陷，需区分处理：对后续块级元素加clear: both清除浮动影响；对父容器用clearfix或display: flow-root使其包含浮动子元素。
浮动图片后文字不环绕、错位或塌陷怎么办
多数情况是父容器没处理浮动溢出，导致后续元素被挤到浮动元素下方，或父容器高度塌陷成 0。这不是图片本身的问题，而是 float 的脱离文档流特性引发的连锁反应。
核心思路只有两个：清除浮动影响，或让父容器重新“感知”浮动子元素的高度。
- 用
clear是针对**紧邻浮动元素之后的某个块级元素**，让它避开浮动区域（比如在图片后加一个） - 用
clearfix是针对**浮动元素的父容器**，让它包裹住内部浮动子元素，避免塌陷 - 现代项目优先用
display: flow-root替代clearfix，更简洁且无副作用
clear 属性只能清“后面”的元素，不能救父容器
clear 的作用对象是它自己所在的元素，不是它的父级。常见误用是给图片加 clear: left，这反而会让图片自己下移，完全偏离环绕意图。
正确用法是：图片浮动后，希望下一段文字从新行开始、不绕图？那就给那段文字加 clear: both：
立即学习“前端免费学习笔记（深入）”；
@@##@@这段文字会绕图
这段文字不会绕图，会从下一行完整开始
注意：clear 对 inline 元素无效，只对块级元素（如 p、div、section）起作用。
clearfix 的经典写法和为什么需要它
当图片浮动、文字环绕，但父容器（比如一个 和 clearfix 只会让布局越来越不可控。
.clearfix::before,
.clearfix::after {
content: "";
display: table;
}
.clearfix::after {
clear: both;
}@@##@@ 文字正常环绕，article 高度也正确包含了图片和文字
