浮动导致父容器高度塌陷不是bug而是设计本意，因浮动元素脱离文档流，父容器无法感知其高度；推荐用display: flow-root触发bfc解决，兼容现代浏览器且无裁剪副作用，ie需回退overflow: hidden或clearfix。
浮动元素脱离文档流，父容器“看不见”它们
父盒子高度塌陷不是 bug，是 float 的设计本意：它让元素像“浮在文字上方的图片”一样脱离普通文档流，但又保留在页面物理空间中。父容器计算高度时，只看还在文档流里的子元素——浮动的 div、img 或 li 全部被忽略，结果就是 height: 0。
常见表现包括：background-color 不显示、border 缩成一条线、后续元素上移覆盖浮动内容、margin-top 在父容器上失效。
display: flow-root 是现代标准解法
给父容器加 display: flow-root，就能创建 BFC（块级格式化上下文），强制它包含所有浮动子元素，且不改变溢出行为——不会意外裁剪 box-shadow、下拉菜单或 tooltip。
- 兼容性：Chrome 64+、Firefox 58+、Safari 15.4+、Edge 79+；IE 完全不支持
- 语义干净，无需伪元素或额外 DOM 节点
- 和
flex/grid共存无冲突，哪怕子元素仍用float（比如打印样式或遗留代码）
overflow: hidden 是兼容 fallback，但副作用明显
如果项目还要支持 IE11，overflow: hidden 是最稳妥的降级方案——它也触发 BFC，但会把超出父容器的内容直接裁掉。
容易踩的坑：
-
overflow: auto在 Safari 下可能渲染出不必要的滚动条 - 轮播图、气泡提示、下拉框等定位元素一旦超出父容器，会被悄悄截断
- 动画位移、阴影、伪元素
::before/::after都可能被裁剪
clearfix 已过时，除非必须兼容 IE8–11
经典 .clearfix::after 方案本质是插入一个“看不见但占位”的块元素来撑高父容器。它现在只剩一个价值：兜底老 IE。
问题在于：
- 伪元素可能干扰读屏软件（尤其
content: ""缺失时） - 缩放或高 DPI 屏幕下偶发渲染错位
- 多一层重排，性能略差于
flow-root - Flex/Grid 布局中加了也无效——这些布局模式本身就不塌陷
真正容易被忽略的是：加了 flow-root 或 overflow: hidden 后高度“回来”了，不代表布局就稳了。还得检查是否触发了 margin-collapse、min-height 冲突，或者父容器用了 vertical-align 导致基线偏移——这些会让视觉看起来正常，但和相邻元素间距异常。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
