给图片加上float属性之后，原本撑开段落的图片好像“消失”了一样，段落高度塌陷、背景色截断、边框错位，这些问题几乎是每个写CSS的人都踩过的坑。要彻底解决它，得先弄清楚浮动到底对文档流做了什么，再选择合适的清除方式。本文围绕“将图片包在块级容器内，并用clearfix或overflow控制高度”这条思路，完整梳理一遍解决方案。
为什么浮动图片会让段落高度异常
浮动的本质是把元素从正常的文档流中拿出去，让它向左或向右靠拢，周围的行内内容会环绕它排列。问题在于：脱离文档流的元素不再参与父容器的高度计算。也就是说，当一张原本撑起段落高度的图片被设置成float: left之后，段落本身只剩文字部分的高度，图片“飞”到了容器外面。
看一个最典型的场景：段落里有一张200像素高的图片，加上float: left后，如果段落里文字很少，段落的可见高度可能只有一行文字那么高，图片底部直接溢出到段落外，甚至压到下方元素上。更常见的情况是父容器设置了背景色或边框，塌陷后背景只覆盖了文字区域，视觉上非常难看。
<style>
.text-block {
background: #eef;
border: 1px solid #99c;
}
.text-block img {
float: left;
margin: 0 15px 8px 0;
}
</style>
<div class="text-block">
<img src="photo.jpg" alt="示例图片" width="200">
<p>这里只有很少的文字，段落高度完全不足以包裹浮动的图片。</p>
</div>上面这段代码运行后，浅蓝色背景只包住了那一行文字，图片的下半部分露在背景外面。这就是高度塌陷最直观的表现。理解了原因，后面的修复手段就好懂了。
方案一：将图片包在块级容器内并用clearfix清除浮动
clearfix是历史最悠久、兼容性最好的清除浮动方案。它的核心思想是在容器末尾插入一个看不见的块级元素，让这个元素强制排在浮动图片的下方，从而把容器高度“顶”回来。现代写法使用伪元素，不需要在HTML里塞多余的标签。
这里的关键操作是：不要直接对段落本身做文章，而是把浮动图片放进一个独立的块级容器里，在这个容器上应用clearfix。这样文字环绕逻辑和高度控制逻辑被解耦，互不干扰，后期的样式维护也更清晰。推荐使用 Nicolas Gallagher 提出的现代化 clearfix 写法：
<style>
.figure-box {
float: left;
margin: 0 15px 8px 0;
max-width: 40%;
}
.figure-box img {
display: block;
max-width: 100%;
height: auto;
}
.figure-box figcaption {
font-size: 12px;
color: #666;
padding-top: 4px;
}
/* 现代clearfix写法 */
.clearfix::after {
content: "";
display: table;
clear: both;
}
</style>
<div class="text-block clearfix">
<figure class="figure-box">
<img src="photo.jpg" alt="示例图片">
<figcaption>图片说明文字</figcaption>
</figure>
<p>段落文字会环绕在figure容器右侧，而父级的高度由clearfix伪元素保证完整包裹。</p>
</div>注意几个细节：首先，浮动的是.figure-box这个容器而不是img本身，容器内部可以对图片和图注做任意排版；其次，display: table比display: block更稳妥，能避免外边距折叠带来的意外；最后，伪元素必须有content属性，哪怕值是空字符串，否则不会渲染。这种方案没有任何副作用，唯一要注意的是老项目如果还在兼容IE8以下浏览器，需要额外提供zoom: 1触发hasLayout，不过现在基本不需要考虑了。
方案二：利用overflow触发BFC包裹高度
如果不想写clearfix类，还有一个更省事的办法：给包含浮动图片的容器设置overflow: hidden或overflow: auto。它的原理是，设置了非visible的overflow值之后，容器会创建一个新的BFC（块级格式化上下文），而BFC有一条布局规则：BFC在计算高度时，会把内部所有浮动子元素的高度也算进去。于是容器重新“看见”了浮动图片，高度自然恢复正常。
<style>
.text-block {
background: #eef;
border: 1px solid #99c;
overflow: hidden; /* 触发BFC，包裹浮动子元素 */
}
.text-block img {
float: left;
margin: 0 15px 8px 0;
}
</style>
<div class="text-block">
<img src="photo.jpg" alt="示例图片" width="200">
<p>容器通过overflow: hidden创建了BFC，高度会自动包含浮动图片。</p>
</div>这个方案代码量最少，但也有明显代价。overflow: hidden会裁掉溢出容器的内容，如果图片上有关联的阴影、下拉菜单、tooltip之类需要溢出显示的元素，会被硬生生切掉；overflow: auto虽然不裁内容，但当内部元素尺寸超出时可能出现意料之外的滚动条。所以在选择时要评估容器内是否会出现溢出内容。
两种方案对比与选择建议
两种方案各有适用场景。clearfix胜在无副作用、语义清晰，一个.clearfix工具类可以全局复用，适合内容复杂的页面和长期维护的项目；overflow方案胜在简单直接，一行代码解决问题，适合结构简单、确定不会有内容溢出的局部容器。如果不确定，优先用clearfix。
| 对比项 | clearfix方案 | overflow方案 |
|---|---|---|
| 代码量 | 需定义工具类并挂到容器上 | 一行属性即可 |
| 副作用 | 几乎没有 | 可能裁剪或截断溢出内容 |
| 复用性 | 高，全局定义一次到处使用 | 低，逐个容器设置 |
| 适用场景 | 复杂布局、长期项目 | 简单局部修复、快速原型 |
另外提醒一点：清除浮动只针对传统浮动布局有意义。如果是新项目，图文环绕效果完全可以交给CSS Grid或Flexbox配合shape-outside实现，从根源上避免高度塌陷问题。只有在维护老代码或确实需要文字环绕效果时，才需要动用上面的方案。掌握浮动与BFC的关系，不仅能解决图片高度塌陷，也能帮你理解很多看似诡异的布局现象。