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

最兼容的写法（支持 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 只会让布局越来越不可控。

好了，本文到此结束，带大家了解了《CSS浮动图片文字环绕问题解决方法》，希望本文对你有所帮助！关注golang学习网公众号，给大家分享更多文章知识！