CSS中如何避免float浮动引起父元素塌陷，实现容器自动填充高度？

本文共计840个文字，预计阅读时间需要4分钟。

当子元素使用了 `float: left` 或 `float: right`，它就不再参与父容器的宽度计算。因此，父元素的高度可能会缩为0（除非存在其他非浮动内容）。这不是bug，而是`float`属性的预期行为——它主要用于处理文字环绕图片这类场景。

解决思路不是“让父元素强行撑高”，而是让父容器重新建立包含浮动子元素的 BFC（块级格式化上下文），从而自然包裹住浮动元素。

用 overflow: hidden 触发BFC最直接

给父容器加 overflow: hidden（或 overflow: auto）是最常用、兼容性好（IE6+）、副作用小的方法。它强制创建 BFC，使父容器能正确计算浮动子元素的高度。

• ✅ 适用于大多数布局场景，比如导航栏、图文混排容器
• ⚠️ 注意：如果父容器内部真有需要溢出显示的内容（比如下拉菜单、tooltip），overflow: hidden 会裁剪掉，这时得换方案
• ❌ 不要写 overflow: visible——它不触发 BFC，无效

.container { overflow: hidden; /* 关键 */ } .container .float-item { float: left; width: 200px; }

clear: both 清除浮动必须加在父容器内部末尾

用 clear: both 是另一种思路，但必须确保清除元素在浮动子元素之后、且仍在父容器内。常见错误是把 <div style="clear:both"></div> 写到父容器外面，或者忘了加。