设置 overflow:hidden 可触发 BFC，使父元素包含浮动子元素，解决高度塌陷问题。BFC 具有包裹浮动元素的特性，从而恢复父容器的正常高度计算，实现清除浮动效果。
当一个父元素内部的子元素使用了 float 属性（如 float:left 或 float:right），这些浮动元素会脱离正常的文档流，导致父元素无法正确“包裹”它们，可能出现高度塌陷的问题。此时，给父元素设置 overflow:hidden 可以触发 BFC（块级格式化上下文），从而实现“清除浮动”的效果。
overflow:hidden 与 BFC 的关系
在 CSS 中，overflow 属性值为 hidden、auto 或 scroll 时，会为该元素创建一个 BFC。BFC 最重要的特性之一是：它能包含内部的浮动元素，使父容器能够正确计算并包围这些浮动子元素的高度。
- BFC 阻止了内部浮动元素溢出或影响外部布局
- 父元素一旦形成 BFC，就会把所有浮动子元素“包含”在内
- 因此 overflow:hidden 不仅是隐藏溢出内容，还能解决高度塌陷问题
清除浮动的实际效果
假设有一个 div 包含两个向左浮动的子 div，如果没有清除浮动，父 div 的高度可能显示为 0（特别是在没有其他非浮动内容的情况下）。加上 overflow:hidden 后，父元素会自动伸展，包裹住所有浮动子元素，视觉上恢复正常。
示例代码：
立即学习“前端免费学习笔记（深入）”；
此时外层 div 能正确包裹两个浮动子元素，不会出现高度塌陷。
为什么叫“清除浮动”？
这里的“清除”并不是让浮动失效，而是指解决了浮动带来的布局问题——即父容器无法包含子元素的问题。“清除浮动”本质是恢复正常的盒模型包裹行为。使用 overflow:hidden 是一种简洁有效的手段，同时它还有副作用：可能会裁剪真正需要溢出的内容（比如下拉菜单、定位元素等），所以要谨慎使用。
基本上就这些。overflow:hidden 清除浮动的核心原理是触发 BFC，让父元素重新获得对浮动子元素的“包含能力”。不复杂但容易忽略细节。
