本文详解如何利用 flexbox 布局替代传统 float 实现左右对齐的导航区块，并确保后续普通 `
` 元素无需任何 `clear` 或定位样式即可自动出现在其下方，彻底规避浮动塌陷问题。
在传统 CSS 布局中，使用 float: left 和 float: right 虽可快速实现左右分栏，但会将元素移出标准文档流（normal flow），导致其父容器高度坍缩，且后续兄弟元素（如
）可能上浮至浮动元素旁——这就是著名的“浮动塌陷”问题。此时，开发者常被迫为正文添加 clear: both 或 overflow: hidden 等补救性样式，违背了“语义清晰、样式解耦”的设计初衷。
而现代解决方案是采用 CSS Flexbox 布局：它在保持元素处于文档流内的同时，提供强大、可控的对齐能力，且天然具备“流式后续内容自动换行”的特性——这正是本需求的核心突破口。
✅ 推荐实现：Flexbox 驱动的语义化导航结构
以下代码完全满足原始需求：
- L block 左对齐、R blocks 右对齐且响应式自适应；
- 所有顶部区块位于同一水平线；
元素无需任何 CSS 即可自然位于导航下方；
- 使用
- 无 float、无 clear、无 hack。
<nav>
<div class="nav-left-group">
<h1>[Left Block]</h1>
</div>
<div class="nav-right-group">
<h3>[Right Block 1]</h3>
<h3>[Right Block 2]</h3>
</div>
</nav>
<p>Inside p tag.</p><p><span>立即学习</span>“<a href="https://pan.quark.cn/s/cb6835dc7db1" style="text-decoration: underline !important; color: blue; font-weight: bolder;" rel="nofollow" target="_blank">前端免费学习笔记（深入）</a>”；</p>对应 CSS（极简、无侵入性）：
nav {
display: flex;
justify-content: space-between;
align-items: center; /* 保证垂直居中对齐（可选） */
}
/* 确保右侧多个元素并排显示 */
.nav-right-group {
display: flex;
gap: 1rem; /* 推荐使用 gap 控制间距，比 margin 更健壮 */
}? 关键原理说明：display: flex 将 设为弹性容器，justify-content: space-between 自动将第一个子元素（左组）推至起点，最后一个子元素（右组）推至终点；两组均保持在文档流内，因此 作为 的下一个块级兄弟元素，会严格遵循 HTML 顺序，在 计算出的实际高度之后自然换行渲染——这是 Flexbox 对文档流的友好继承，与 float 的“脱离流”本质形成根本区别。
⚠️ 注意事项与最佳实践
- 避免滥用 float 做布局：float 本意是实现文字环绕图片等排版效果，CSS3 后已不推荐用于整体页面布局；
- 兼容性考量：Flexbox 在所有现代浏览器（Chrome 29+、Firefox 28+、Safari 9+、Edge 12+）中完全支持；若需支持 IE10/11，可添加 -ms- 前缀，但需注意其 Flexbox 实现存在若干差异；
- 语义优先：用
