本文详解如何利用 flexbox 替代传统浮动（float）实现左右对齐的导航区块，并确保后续普通段落（如 `
`）无需任何 `clear` 或定位样式即可自动出现在其下方——真正实现语义清晰、样式解耦的专业布局。
在传统浮动布局中，一旦对子元素应用 float: left 或 float: right，它们会脱离文档正常流（normal flow），导致父容器高度塌陷，且后续非浮动元素（如
）可能“上浮”至浮动元素旁——这正是原问题中必须为 .p-div 显式添加 clear: both 的根本原因。而该限制违背了“正文应零样式介入”的设计诉求。
现代 CSS 提供了更健壮、语义更清晰的替代方案：Flexbox 布局。它不依赖脱离流的浮动，而是通过定义容器的主轴对齐方式，让子元素在保持文档流位置的同时完成精准排列。
以下为推荐实现（完全符合原始需求）：
Body text. This paragraph requires no CSS — it flows naturally below the nav.
立即学习“前端免费学习笔记（深入）”；
对应 CSS（仅作用于
nav {
display: flex;
justify-content: space-between; /* 左组靠左，右组靠右 */
align-items: center; /* 垂直居中对齐，确保同水平线 */
margin-bottom: 1rem; /* 可选：为正文预留间距 */
}
/* 确保左右两组内部元素保持块级堆叠（如多个 h3 并排） */
.nav-left-group,
.nav-right-group {
display: flex;
flex-direction: column; /* 若需垂直排列内部项（如多行标题） */
}
/* 若希望右组内元素水平并排（更常见），则： */
.nav-right-group {
flex-direction: row;
gap: 1rem; /* 推荐使用 gap 替代 margin 控制间距 */
}✅ 关键优势说明：
元素紧随
- 所有对齐逻辑封装在
