浮动元素本身不触发margin塌陷，但会让父容器“看不见”子元素的margin；因其脱离文档流导致父容器高度塌陷（height为0），子元素的margin-bottom虽存在却无法撑开父容器，后续非浮动元素直接从父容器顶部排布，视觉上如同margin失效。
浮动元素本身不触发 margin 塌陷，但会让父容器“看不见”子元素的 margin
浮动元素（float: left 或 float: right）脱离标准文档流，导致父容器高度塌陷——即父容器的 height 变为 0 或仅由内联内容撑开。此时，子元素设置的 margin-bottom 仍存在，但因父容器没撑开，视觉上就像“被吞掉”了；后续非浮动兄弟元素会直接贴着父容器底边出现，看起来像 margin 没生效。
用开发者工具检查：computed 中能看到浮动子元素的 margin-bottom 值正确，但父容器的 height 明显异常（比如是 0），这就是典型塌陷信号。
为什么浮动后 margin-bottom 对后面的文字没空隙？
因为浮动元素和后续非浮动文字不在同一文档流层级：浮动元素已“浮起”，而文字仍在普通流中，从父容器顶部开始排布。它不会去“感知”浮动元素的 margin-bottom，更不会为其留白。
- 这不是 margin 合并（collapse），而是流层隔离
-
clear: both加在文字前，能强制它下移到浮动区域下方，此时才真正“接触”到浮动元素的底部边界 - 若想让文字和浮动块保持垂直间距，必须靠
clear元素或 BFC 容器“承接”这个 margin
给父容器加 overflow: hidden 真的能修 margin 吗？
能，但只解决“父容器撑不开”这半截问题。它通过触发 BFC，让父容器重新包含浮动子项，于是子项的 margin-bottom 就能影响父容器高度，后续兄弟元素自然就有了参照位置。
注意几个现实限制：
-
overflow: hidden可能意外裁剪position: absolute子元素或阴影 - 它不解决两个浮动元素之间的垂直间距问题——它们仍会紧贴，
margin-bottom对彼此无效 - 若父容器本就需要滚动，
overflow: auto可能多出滚动条，且在某些旧版 Safari 中表现不稳定
现代项目里别再靠 float + margin 组合控制间距
浮动本就不是为间距设计的布局机制。它的 margin 行为高度依赖上下文，且在响应式嵌套中极易失控。真正可控的替代方案是直接去掉 float：
- 并排元素用
display: flex+gap，间距清晰、无塌陷风险 - 需兼容 IE11 的场景，可用
display: inline-block+text-align: center，但要处理基线对齐和空白字符 - 清除浮动的语义化写法：用
display: flow-root替代overflow: hidden，既能防塌陷，又不阻断外边距合并逻辑
留着 float 又加 flex 或 grid，等于两套布局规则打架，最终 margin 表现谁也说不清。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
