设置 overflow: hidden 能包裹住浮动元素，是因为它触发了 bfc（block formatting context，块级格式化上下文）。bfc 是一个独立的渲染区域，内部的浮动元素在计算高度时会被纳入其中，从而避免高度塌陷。具体做法是在父容器上添加该属性，这样父元素就能正确包含子元素的浮动高度。
BFC 的触发条件有哪些
除了 overflow: hidden，还有多种 CSS 属性可以触发 BFC。常见的包括 float 不为 none、position 为 absolute 或 fixed、以及 display 为 flex、inline-block、table-cell 等。这些属性都会创建一个新的 BFC，从而解决浮动带来的布局问题。
div {
overflow: hidden;
}
.float-item {
float: left;
}
为什么 BFC 能解决高度塌陷
BFC 的规则之一是：计算 BFC 的高度时，浮动子元素也参与计算。因此，当父元素形成 BFC 后，它会“看到”内部浮动的子元素，并自动调整自身高度以包裹它们。这解决了传统文档流中父元素高度为 0 的问题。
div {
display: flex;
}
.float-item {
float: left;
}
使用 BFC 时的注意事项
在使用 BFC 时，需要注意以下几点：首先，BFC 不会影响外部的元素，即外部元素不会与 BFC 内的元素发生重叠；其次，BFC 内部的元素不会和外部的元素发生边距合并；最后，BFC 中的元素是独立渲染的，不会影响其他 BFC 的布局。这些特性使得 BFC 成为解决浮动问题的有效手段。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
