浮动导致父容器高度塌陷，子元素margin-top“失效”实为父容器高度坍缩为0，子元素及其外边距悬于外部；overflow:hidden通过触发bfc恢复父容器高度，但会裁剪溢出内容，非根本解法；推荐display:flow-root（现代浏览器支持良好）或改用flex/grid+gap彻底规避。
浮动导致父容器高度塌陷，子元素margin-top“失效”
这不是 margin 没生效，而是父容器本身已经“没高度”了——浮动元素脱离文档流，父容器无法感知子元素存在，height: auto 下高度坍缩为 0。此时你给子元素设 margin-top: 40px，它确实生效了，但整个子元素（连同它的 margin）都悬在父容器外部，看起来像 margin “顶穿”了父级。
为什么 overflow: hidden 能“修好”，但不是根本解法
overflow: hidden 触发 BFC，强制父容器包含浮动子项，于是父容器恢复高度，子元素的 margin-top 才能正常作用于其内部空间。但它只是“兜底”：一旦子元素有 box-shadow、position: absolute 弹层或动画溢出，就会被意外裁剪。
- 仅靠
overflow: hidden不解决浮动本质问题，只是掩盖布局失控 - 若父容器本就需要滚动，用
overflow: auto更安全 - IE6/7 需搭配
zoom: 1触发 hasLayout，否则无效
现代推荐：用 display: flow-root + 清除浮动语义
display: flow-root 同样触发 BFC，但不改变溢出行为，也不影响子元素定位——它是专为这类场景设计的值。配合 float 使用时，必须确保父容器自身应用该声明，而非只加在子元素上。
- 正确写法：
.parent { display: flow-root; }，子元素可继续float: left - 兼容性已足够：Chrome 64+ / Firefox 58+ / Safari 15.4+ / Edge 79+
- 老项目 fallback：用
padding-top: 0.1px或border-top: 1px solid transparent，物理隔断 collapse 条件
真正该淘汰的做法：靠 margin-top 控制父子间距
当父容器高度依赖浮动子元素的 margin-top 来“撑开”，说明布局模型已错位。更健壮的替代路径是：
- 改用
display: flex或display: grid，浮动和 margin collapse 都不再适用 - 把垂直间距逻辑移到父容器的
gap上（gap: 24px），语义清晰且无塌陷风险 - 若必须保留浮动，优先用
padding-top替代子元素margin-top，间距归属明确
嵌套深、动态插入的浮动组件（比如侧边栏菜单）最容易暴露这个问题——这时硬加 flow-root 只是补洞，重构为 flex 或显式清除浮动才是根治点。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
