本文详解如何通过现代 css 布局（flexbox）替代过时的 float 方案，实现多个 div 容器严格垂直堆叠，解决因浮动脱离文档流导致的错位、重叠或布局塌陷问题。
本文详解如何通过现代 css 布局（flexbox）替代过时的 float 方案，实现多个 div 容器严格垂直堆叠，解决因浮动脱离文档流导致的错位、重叠或布局塌陷问题。
在网页开发中，“让两个 div 上下堆叠”看似简单，却常因误用 float 而引发布局混乱——正如原始问题所示：当对图片使用 float: left 或 float: right 后，其父容器高度塌陷，导致后续区块无法自然换行堆叠，而是“漂浮”在上一区块的同一水平线甚至相互覆盖。
根本原因在于：浮动元素会脱离标准文档流（normal flow），其父容器若无其他非浮动内容或清除机制（如 clear: both），将无法正确包裹子元素，从而失去高度，造成视觉上的“错层”。
✅ 推荐解决方案：使用 Flexbox 布局（现代、语义清晰、兼容性良好）
只需为外层容器添加 display: flex 并设置 flex-direction: column，即可让所有直接子元素（如 #container 和 #container1）严格按顺序垂直堆叠，无需 hack 式的 height 强制设定或负 margin 折腾：
立即学习“前端免费学习笔记（深入）”；
<div class="layout-stack">
<div id="container">
<div id="floated-img">
<img src="https://images.unsplash.com/photo-1571988840298-3b5301d5109b?ixlib=rb-4.0.3&auto=format&fit=crop&w=687&q=80" alt="示例图片">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</div>
</div>
<div id="container1">
<div id="floated-img1">
<img src="https://images.unsplash.com/photo-1571988840298-3b5301d5109b?ixlib=rb-4.0.3&auto=format&fit=crop&w=687&q=80" alt="第二张图片">
<p>Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
</div>
</div>
<!-- 第三部分可无缝追加 -->
<div id="container2">
<div id="floated-img2">
<img src="https://images.unsplash.com/photo-1571988840298-3b5301d5109b?ixlib=rb-4.0.3&auto=format&fit=crop&w=687&q=80" alt="第三张图片">
<p>Ut enim ad minim veniam, quis nostrud exercitation ullamco.</p>
</div>
</div>
</div>对应 CSS（简洁、可维护）：
.layout-stack {
display: flex;
flex-direction: column;
gap: 24px; /* 推荐使用 gap 替代 margin，更可控、无外边距合并问题 */
}
/* 移除所有 float 相关样式 —— 不再需要 */
#floated-img img,
#floated-img1 img,
#floated-img2 img {
width: 200px;
display: block; /* 保持块级行为，避免底部空白 */
}
#floated-img p,
#floated-img1 p,
#floated-img2 p {
margin-top: 8px; /* 使用正向 margin，语义清晰 */
margin-bottom: 0;
}⚠️ 关键注意事项：
- 不要混合 float 与 Flexbox：一旦外层启用 display: flex，内部子元素的 float 属性将被忽略（CSS 规范明确要求），强行保留只会增加调试成本。
- 避免滥用 height 强制固定高度：原答案中为图片加 height: 200px 属临时补救，易导致图片变形或响应式失效；应优先用 object-fit: cover 或 max-width: 100% 保障自适应。
- 语义化结构优于 ID 堆砌：建议将重复结构抽象为通用类（如 .section, .media-block），而非 #container1/#container2 等难以维护的 ID 序列。
- 无障碍友好：确保 <img> 拥有准确的 alt 文本，段落文字语义完整，避免仅靠视觉位置传递信息。
总结：垂直堆叠的本质是控制文档流方向，而非“推挤”或“覆盖”。Flexbox 的 column 模式提供了最直接、最健壮的实现路径。放弃浮动，拥抱现代布局，不仅代码更简洁，也更利于维护、响应式扩展与无障碍支持。
