高度塌陷是因浮动元素脱离文档流，父元素无法感知其存在；设置 overflow: hidden 可触发 BFC，使父容器包含浮动子元素并恢复正确高度。示例中通过 .container {overflow: hidden} 解决了左右浮动子块导致的高度塌陷问题。优点是写法简单、兼容性好且无需额外标签，缺点是可能裁剪溢出内容如菜单或提示框，需确保无此类需求。该方法为清除浮动常用技巧，适用于多数常规布局场景，注意避免误切溢出元素即可。
当使用 float 属性让元素浮动时，父容器往往无法正确包含这些浮动子元素，导致父元素高度塌陷。一个简单有效的解决方法是给父元素设置 overflow: hidden。
为什么会出现高度塌陷？
浮动元素会脱离标准文档流，父元素在计算高度时“看不见”这些子元素，因此高度可能变为0或仅包含非浮动内容。
使用 overflow: hidden 清除浮动的原理
给父容器设置 overflow: hidden 可以触发 BFC（块级格式化上下文），使父元素能够包含内部的浮动元素，从而恢复正确的高度。示例代码：
左浮动右浮动.container { overflow: hidden; / 包含浮动子元素 / background: #f0f0f0; }
.float-left { float: left; width: 100px; height: 100px; background: red; }
.float-right { float: right; width: 100px; height: 100px; background: blue; }
这种方法的优缺点
- 优点：写法简单，兼容性好，无需额外标签
- 注意点：如果子元素有超出容器的内容（如下拉菜单、提示框），会被裁剪
- 确保不会影响其他布局需求，比如不需要滚动或溢出显示
基本上就这些。overflow: hidden 是清除浮动最常用的技巧之一，适合大多数常规布局场景。只要注意溢出内容是否会被误切即可。不复杂但容易忽略。
