本文详解如何通过现代 css（flexbox）替代浮动（float）实现多个 div 的可靠垂直堆叠，解决因浮动脱离文档流导致的布局错位问题，并提供可复用的响应式结构与完整代码示例。
本文详解如何通过现代 css（flexbox）替代浮动（float）实现多个 div 的可靠垂直堆叠，解决因浮动脱离文档流导致的布局错位问题，并提供可复用的响应式结构与完整代码示例。
在传统布局中，开发者常误用 float 实现元素排列，但浮动会使元素脱离标准文档流，导致父容器高度塌陷、后续元素定位异常——这正是提问者遇到的核心问题：第二组图文未按预期“堆叠在第一块下方”，而是发生重叠或错位。
推荐方案：使用 Flexbox 垂直堆叠容器
最简洁、健壮且语义清晰的方式是将所有区块包裹在一个 display: flex; flex-direction: column; 的容器中。该方式天然支持垂直流式布局，无需 hack 式的 height 修补或负 margin 折腾，也完全规避了浮动带来的副作用。
以下是优化后的完整实现：
立即学习“前端免费学习笔记（深入）”；
<div class="section-stack">
<!-- 第一节：左图 + 下方文字 -->
<section class="section">
<img src="https://images.unsplash.com/photo-1571988840298-3b5301d5109b?ixlib=rb-4.0.3&auto=format&fit=crop&w=687&q=80"
alt="Section 1 image" style="max-width:90%">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor.</p><div class="aritcle_card flexRow">
<div class="artcardd flexRow">
<a class="aritcle_card_img" href="/xiazai/skill11445" title="使用华数设计生成高保真HTML原型、演示文稿、动画和设计评审"><img
src="https://img.php.cn/upload/skill/001/246/273/6adaf20e695c2374.jpg" alt="使用华数设计生成高保真HTML原型、演示文稿、动画和设计评审" ></a>
<div class="aritcle_card_info flexColumn">
<a href="/xiazai/skill11445" title="使用华数设计生成高保真HTML原型、演示文稿、动画和设计评审">使用华数设计生成高保真HTML原型、演示文稿、动画和设计评审</a>
<p>使用经过文档化的设计技能，从真实的品牌或项目背景中生成HTML原生原型、幻灯片、动态演示、可视化图表和评审流程。</p>
</div>
<a href="/xiazai/skill11445" title="使用华数设计生成高保真HTML原型、演示文稿、动画和设计评审" class="aritcle_card_btn flexRow flexcenter"><b></b><span>下载</span> </a>
</div>
</div>
</section>
<!-- 第二节：右图 + 下方文字 -->
<section class="section align-right">
<img src="https://images.unsplash.com/photo-1571988840298-3b5301d5109b?ixlib=rb-4.0.3&auto=format&fit=crop&w=687&q=80"
alt="Section 2 image" style="max-width:90%">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut enim ad minim veniam.</p>
</section>
<!-- 第三节：左图 + 下方文字（可无限扩展） -->
<section class="section">
<img src="https://images.unsplash.com/photo-1571988840298-3b5301d5109b?ixlib=rb-4.0.3&auto=format&fit=crop&w=687&q=80"
alt="Section 3 image" style="max-width:90%">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis aute irure dolor.</p>
</section>
</div>对应 CSS（语义化、可维护、无冗余 ID）：
.section-stack {
display: flex;
flex-direction: column;
gap: 2rem; /* 统一控制区块间距，替代 margin-top/bottom */
max-width: 1200px;
margin: 0 auto;
padding: 1rem;
}
.section {
display: flex;
flex-direction: column;
align-items: flex-start; /* 默认左对齐 */
}
.section.align-right img {
align-self: flex-end; /* 图片右对齐，文字仍保持左对齐 */
}
.section img {
width: 200px;
height: auto;
margin-bottom: 0.75rem;
}
.section p {
margin: 0;
line-height: 1.6;
color: #333;
}✅ 关键优势说明：
- ✅ 不依赖浮动：彻底摆脱 float 及其引发的清除（clear）、高度塌陷等问题；
- ✅ 天然堆叠：flex-direction: column 确保子元素严格垂直排列，顺序即 DOM 顺序；
- ✅ 灵活对齐：通过 align-self 精确控制单个图片左右位置，不影响文字排版；
- ✅ 响应友好：后续可轻松添加 @media 规则，在小屏下改为 flex-direction: row 实现横向滚动或卡片式布局；
- ✅ 可扩展性强：新增
即自动纳入堆叠流，无需修改 CSS。
⚠️ 注意事项：
- 避免混合使用 float 和 Flexbox —— 它们属于不同布局模型，混用易引发不可预测行为；
- 不要为 .section 设置固定 height（如答案中建议的 height: 200px），这会截断内容或破坏响应性；
- 使用语义化类名（如 .section, .section-stack）替代 #container1 等无意义 ID，提升可维护性与可访问性。
掌握 Flexbox 垂直堆叠，不仅解决了当前问题，更为你构建模块化、可复用的网页结构打下坚实基础。
