如何在CSS中清除浮动避免父元素高度塌陷_overflow hidden方法-css教程-PHP中文网

如何在CSS中清除浮动避免父元素高度塌陷_overflow hidden方法

P粉602998670

发布： 2025-12-03 10:01:29

原创

149人浏览过

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

如何在css中清除浮动避免父元素高度塌陷_overflow hidden方法

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

为什么会出现高度塌陷？

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

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

给父容器设置 overflow: hidden 可以触发 BFC（块级格式化上下文），使父元素能够包含内部的浮动元素，从而恢复正确的高度。

示例代码：

速创猫AI简历

一键生成高质量简历

291

查看详情

<div class="container">
  <div class="box float-left">左浮动</div>
  <div class="box float-right">右浮动</div>
</div>
<p>.container {
overflow: hidden; /<em> 包含浮动子元素 </em>/
background: #f0f0f0;
}</p><p>.float-left {
float: left;
width: 100px;
height: 100px;
background: red;
}</p><p>.float-right {
float: right;
width: 100px;
height: 100px;
background: blue;
}</p>

登录后复制