本文介绍一种通过负外边距与子元素显式底部间距配合的方案，解决浮动图片在文本不足时导致容器产生不可折叠底部间隙的问题，确保后续标题等元素的间距完全由其自身 margin-top 控制。
本文介绍一种通过负外边距与子元素显式底部间距配合的方案，解决浮动图片在文本不足时导致容器产生不可折叠底部间隙的问题，确保后续标题等元素的间距完全由其自身 margin-top 控制。
在使用 float 实现图文混排（如左图右文）时，一个常见却易被忽视的布局陷阱是：当文本内容高度小于浮动图片高度时，容器底部会残留无法坍缩的空白，干扰后续元素（如标题）的垂直间距。这是因为浮动元素脱离文档流后，其 margin-bottom 与文本容器（如 <p></p>）的默认 margin-bottom（通常为 1em）共同作用，导致 .container 的实际高度超出预期，进而使紧随其后的 .header 因自身的 margin-top 而与前文产生过大的视觉间距。
根本原因在于：浮动上下文中的块级容器无法自动“感知”内部浮动元素的底部边界，且普通块级子元素的底部外边距不会与浮动元素的底部外边距发生坍缩。
✅ 正确解法不是移除图片的 margin-bottom（这会破坏图文间距），也不是依赖不确定的 UA 默认值，而是采用「主动补偿」策略：
-
统一底部基准：为容器内最后一个非浮动子元素（通常是
<p></p>、<div> 等文本容器）显式设置 <code>margin-bottom: 15px（与图片margin-bottom一致）； -
抵消冗余高度：将
.container自身的margin-bottom设为-15px，精确抵消上一步引入的底部外边距，使容器视觉高度“收缩”至图文内容的实际底部； -
保留清除浮动：继续使用
::after伪元素clear: both确保容器正确包裹浮动子项。 - 此方案兼容所有现代浏览器，无需 Flexbox 或 Grid（适用于需支持旧版浏览器的项目）；
- 若容器内可能包含多种结尾元素（如
<p></p>、<ul></ul>、<blockquote></blockquote>），:last-child选择器可精准匹配，无需额外类名； - 如需响应式适配，建议将
15px替换为 CSS 自定义属性（如--spacing: 15px），便于全局维护； - 避免对浮动图片本身设置
display: inline-block或vertical-align—— 这会破坏浮动行为并引发新的基线对齐问题。
以下是优化后的完整 CSS 示例：
.container {
max-width: 600px;
margin-bottom: -15px; /* 关键：负边距抵消底部冗余 */
font-family: Arial, sans-serif;
line-height: 1.6;
}
/* 为最后一个子元素统一设置底部间距 */
.container > :last-child {
margin-bottom: 15px;
}
.float-image {
float: left;
margin-right: 15px;
margin-bottom: 15px; /* 图文间垂直留白，不可省略 */
width: 150px;
height: auto;
}
/* 清除浮动，保证容器高度包含浮动元素 */
.container::after {
content: "";
display: block;
clear: both;
}
.header {
margin-top: 30px; /* 后续元素间距完全由此控制 */
}
? 注意事项：
通过这一组合技巧，无论文本内容多寡，.container 的底部边界始终稳定锚定在图文区域的实际末端，.header 的 margin-top 得以真正成为唯一间距控制源，实现可靠、可预测的垂直节奏。
