css 浮动图片文字环绕异常怎么办_clear 属性或 clearfix 使用

浮动图片后文字不环绕或父容器塌陷，需区分处理：对后续块级元素加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 的经典写法和为什么需要它

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