CSS浮动图片文字环绕问题解决方法

CSS中浮动图片导致文字环绕异常或父容器塌陷，本质是float脱离文档流引发的布局连锁反应；解决问题关键在于精准区分场景：若后续块级元素被挤偏，应在该元素上使用clear: both清除浮动影响；若父容器高度塌陷、背景边框丢失，则需用clearfix（兼容旧浏览器）或更现代的display: flow-root（创建BFC，简洁无副作用）让父容器重新包含浮动子元素——选错对象（如给图片加clear）反而加剧问题，理清“清谁”和“为何清”，才能一劳永逸。

浮动图片后文字不环绕、错位或塌陷怎么办

多数情况是父容器没处理浮动溢出，导致后续元素被挤到浮动元素下方，或父容器高度塌陷成 0。这不是图片本身的问题，而是 float 的脱离文档流特性引发的连锁反应。

核心思路只有两个：清除浮动影响，或让父容器重新“感知”浮动子元素的高度。

• 用 clear 是针对**紧邻浮动元素之后的某个块级元素**，让它避开浮动区域（比如在图片后加一个
  ）
• 用 clearfix 是针对**浮动元素的父容器**，让它包裹住内部浮动子元素，避免塌陷
• 现代项目优先用 display: flow-root 替代 clearfix，更简洁且无副作用

clear 属性只能清“后面”的元素，不能救父容器

clear 的作用对象是它自己所在的元素，不是它的父级。常见误用是给图片加 clear: left，这反而会让图片自己下移，完全偏离环绕意图。

正确用法是：图片浮动后，希望下一段文字从新行开始、不绕图？那就给那段文字加 clear: both：

这段文字会绕图
这段文字不会绕图，会从下一行完整开始

注意：clear 对 inline 元素无效，只对块级元素（如 p、div、section）起作用。

clearfix 的经典写法和为什么需要它

当图片浮动、文字环绕，但父容器（比如一个

.clearfix::before,
.clearfix::after {
  content: "";
  display: table;
}
.clearfix::after {
  clear: both;
}

  
  
文字正常环绕，article 高度也正确包含了图片和文字