父容器高度为0是因为浮动元素脱离文档流，不参与height计算；display: flow-root创建bfc可强制包含浮动子元素，是现代推荐解法，需作用于直接父容器。
浮动元素脱离文档流，父容器在计算高度时根本“看不见”它们——这不是 bug，是 CSS 规范行为。
float 为什么会让父容器高度变成 0
设置了 float: left 或 float: right 的元素会从普通文档流中抽离，不再参与父容器的 height 计算。父容器只基于仍在流内的子元素（比如普通 div、p）来决定自身高度。如果父容器里全是浮动子项，又没设 height 或 min-height，那它就塌成一条线。
常见现象包括：
- 父容器背景色不显示
- 边框缩成细线或完全不可见
- 后续兄弟元素直接顶到浮动块上方，布局错乱
clear: both 加在父元素上为什么无效
clear: both 控制的是「自身」不跟前面的浮动元素同行，它不参与父容器的高度计算逻辑。把 clear: both 写在父容器上，等于让一个没浮动的元素“清自己前面的浮”，毫无意义；写在浮动子元素上，只能让它换行，无法让父容器重新感知所有子项高度。
真正起效的是：在父容器末尾插入一个**参与文档流的块级占位元素**，再让它 clear: both——这就是 ::after 伪元素方案的底层逻辑。
display: flow-root 是什么，为什么推荐它
display: flow-root 是 CSS 专门为解决这类问题设计的值，它强制父容器创建 BFC（块级格式化上下文），让容器重新包含所有浮动子元素的高度，且不改变溢出行为、不裁剪 position: absolute 弹层或阴影。
使用时必须注意：
- 必须作用在「直接包裹浮动子项」的父容器上，写在祖父层或子元素上都无效
- 父容器本身要是块级元素（如
display: block），如果是span这类 inline 元素，得先显式设为display: block - 现代浏览器全支持（Chrome 64+、Firefox 58+、Safari 15.4+、iOS 15.4+），IE 完全不支持
overflow: hidden 看似简单，但容易踩坑
overflow: hidden 能触发 BFC，确实能撑开父容器高度，而且兼容性极好（IE6+）。但它本质是“裁剪溢出”，一旦父容器里有下拉菜单、tooltip、阴影或 transform 动画超出边界，就会被意外截断。
更隐蔽的问题是：
- 和
display: flex或display: grid混用时，可能压制 flex 项目排列或引发布局冲突 - 如果父容器本就需要横向滚动（比如长表格），
overflow: hidden会直接禁掉滚动能力 - 某些情况下，它还会干扰
position: sticky的定位锚点
真正难的不是选哪个方案，而是判断：这个父容器是否真的该被浮动子项撑高？如果结构本身已用 flex 或 grid 布局，还去加 clearfix，就是白费力气。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
