清除浮动本身不会导致外边距折叠，真正原因是父容器塌陷使后续元素与更早块级元素相邻，触发margin合并；display: flow-root是最优解，既能包裹浮动又创建独立BFC。
清除浮动本身不会导致外边距折叠
清除浮动（clear）只是让元素避开前面的浮动元素，它不参与、也不触发外边距折叠（margin collapse）。所谓“清除浮动后出现外边距异常”，99% 是误判——真正作祟的是父容器塌陷 + 相邻块级元素的 margin 自然合并，和 clear 无关。
为什么你看到“清除后间距变小了”
典型场景：浮动子元素 → 父容器高度塌陷为 0 → 后续兄弟元素（比如一个 <div>）直接顶到浮动元素底部 → 这个兄弟元素的 <code>margin-top 和它上面“看似相邻”的非浮动元素（可能是前一个正常块）发生折叠。
- 不是
clear引起的，是后续块级元素和更早的块级元素在同一个 BFC 中垂直相邻了 - 如果父容器没触发 BFC，它的内容高度为 0，视觉上就等于“消失”，于是后续元素和父容器之前的元素成了“相邻兄弟”
- 浏览器按规则取两者中较大的
margin-top或margin-bottom，间距就“缩水”了
display: flow-root 是最干净的解法
给浮动元素的父容器设置 display: flow-root，既能包裹浮动子元素（解决塌陷），又能创建独立 BFC（阻止与外部元素的 margin 折叠），还不影响溢出行为，语义清晰。
- 兼容性已足够：Chrome 64+ / Firefox 58+ / Safari 15.4+（2026 年可放心用）
- 比
overflow: hidden更安全——不会意外裁剪position: absolute子元素或阴影 - 比伪元素清除（
::after）更直接——不用操心content、display、clear的组合写法
别用 padding “撑开”父容器来假装解决问题
给塌陷的父容器加 padding-bottom 看似让后续元素下移了，但这是障眼法：
立即学习“前端免费学习笔记（深入）”；
-
padding是固定值，浮动内容高度一变（比如图片加载完成、响应式展开），空隙立刻错位 - 父容器实际尺寸变大，可能破坏栅格对齐、影响
@media断点判断 - 根本没解决塌陷，BFC 没建立，margin 折叠隐患仍在暗处等着你
真正要盯住的，永远是那个没高度的父容器——它才是所有“奇怪间距”的源头。
