高度塌陷是因浮动元素脱离文档流，父元素无法感知其存在；设置 overflow: hidden 可触发 BFC，使父容器包含浮动子元素并恢复正确高度。示例中通过 .container {overflow: hidden} 解决了左右浮动子块导致的高度塌陷问题。优点是写法简单、兼容性好且无需额外标签，缺点是可能裁剪溢出内容如菜单或提示框，需确保无此类需求。该方法为清除浮动常用技巧，适用于多数常规布局场景，注意避免误切溢出元素即可。

当使用 float 属性让元素浮动时，父容器往往无法正确包含这些浮动子元素，导致父元素高度塌陷。一个简单有效的解决方法是给父元素设置 overflow: hidden。

为什么会出现高度塌陷？

浮动元素会脱离标准文档流，父元素在计算高度时“看不见”这些子元素，因此高度可能变为0或仅包含非浮动内容。

使用 overflow: hidden 清除浮动的原理

示例代码：

  左浮动
  右浮动

.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 是清除浮动最常用的技巧之一，适合大多数常规布局场景。只要注意溢出内容是否会被误切即可。不复杂但容易忽略。