父容器高度塌陷是因为浮动元素脱离了标准文档流，导致父容器在计算高度时无法感知到它们。要解决这个问题，最直接且现代的做法是在父容器上触发bfc（块级格式化上下文），例如设置 overflow: hidden 或 display: flow-root，这样父容器就能自动包裹住内部的浮动子元素。
为什么浮动会导致父容器高度为0
当子元素应用了 float: left 或 float: right 后，它们会脱离正常的文档流。这意味着它们在垂直方向上不占据空间，父容器在渲染树中计算自身高度时，只会考虑非浮动的内容。如果父容器内只有浮动元素，其计算高度将为0，从而造成布局塌陷。
.parent {
border: 1px solid red;
}
.child {
float: left;
width: 100px;
height: 100px;
background: blue;
}
预期结果：.parent 的高度为 0，边框紧贴在一起，不包围 .child。
如何通过触发BFC解决高度塌陷
通过给父容器添加特定样式来创建一个新的BFC，可以强制父容器包含内部的浮动元素。常用的方法包括设置 overflow: hidden、display: flow-root 或使用伪元素清除浮动。这些方法的核心原理都是让父容器成为一个独立的格式化上下文，从而能够计算内部浮动元素的高度。
.parent {
overflow: hidden; /* 或者 display: flow-root; */
border: 1px solid red;
}
.child {
float: left;
width: 100px;
height: 100px;
background: blue;
}
预期结果：.parent 的高度变为 100px，边框正确包围 .child。
使用clearfix伪元素方案的具体实现
除了修改父容器样式，还可以使用经典的 clearfix 技巧。这种方法通过在父容器的末尾插入一个不可见的伪元素，并对其进行清除浮动操作，从而撑开父容器的高度。这种方式不会改变父容器的溢出行为，适用于某些对 overflow 敏感的场景。
.parent::after {
content: "";
display: table;
clear: both;
}
预期结果：.parent 的高度同样被撑开至 100px，且不影响其他布局属性。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
