clear: both 只防止重叠，不提供间距；需通过父容器 padding-bottom 或清除元素 margin-top 显式控制空白。
clear: both 之后的元素为什么还紧贴着浮动块？
不是 clear 没生效，而是 clear: both 只保证“不与前面浮动重叠”，不负责“留出视觉间距”。它让元素从浮动结束位置开始渲染，但该位置可能就是上一个浮动块的底部边缘——没有 margin，自然就贴在一起。
常见现象：两列浮动导航栏后跟一个 <h2></h2>，加了 clear: both，标题文字紧贴右栏底边，像被“吸住”一样。
- 直接给清除后的元素加
margin-top最快，但数值难固定（浮动高度可能动态变化） - 在浮动容器上用
padding-bottom更稳妥，把空白留给父容器统一控制 - 若多个清除点需统一间距，建议抽成 CSS 自定义属性：
--clear-spacing: 1.5rem，再在清除元素上写margin-top: var(--clear-spacing)
多个浮动块之间用 margin 分隔，为什么清除后反而错位？
浮动块自身设 margin-right 或 margin-bottom 容易触发 margin 折叠或计算失准，尤其当其中一块高度突变（比如图片加载完成）时，后续清除点的位置会跳变。
真正可控的做法是把间距逻辑从“浮动子项”转移到“清除容器”：
- 给每个浮动块的**直接父容器**加
padding-bottom: 1rem（比如每组两列卡片外层<section></section>） - 清除元素（如
<h3></h3>或<div class="clear-fix">）只负责 <code>clear: both，不再承担间距职责 - 避免在浮动元素上同时用
float和margin混合控制布局，这会让开发者和浏览器都难以预测最终位置 - 确认
.clearfix类确实加在**浮动子元素的直接父容器**上，而不是更外层的 wrapper - 打开开发者工具，看该父容器的 computed height 是否已恢复正常（不再是
0px） - 如果 height 正常但视觉仍重叠，问题一定出在清除元素自身——它需要显式
margin-top或父容器的padding-bottom - 别在同一个容器上同时用
overflow: hidden和.clearfix，前者会抑制后者的清除效果
用 clearfix::after 清除后，下一块仍重叠——是不是伪元素没起作用？
大概率不是伪元素失效，而是你忘了：clearfix 只解决父容器高度塌陷，**不处理清除点与浮动块之间的垂直距离**。它让父容器“感知”到子项高度，但不会自动给后续兄弟元素加空隙。
检查这几个关键点：
现代项目里，有没有比 clear + margin 更干净的解法？
有，而且应该优先考虑：display: flow-root 替代 clearfix，再配合 gap 控制间距。
display: flow-root 不仅能包裹浮动（创建 BFC），还不带 overflow: hidden 的裁剪副作用，语义也更清晰。而真正的间距控制，交给父容器的 gap 或子项的 margin 会更稳定：
.container {
display: flow-root;
padding-bottom: 1.25rem;
}
.container > *:not(:last-child) {
margin-bottom: 1.25rem;
}
注意：如果清除点本身是语义化标题（如 <h2></h2>），别为了间距强行加 margin-top —— 它本该由前一组内容的 padding-bottom 承担。浮动布局的混乱，往往始于把“撑开空间”的责任到处乱分。
