div浮动与overflow:hidden属性相关问题咨询

你提到的场景其实是前端开发中很常见的父容器高度塌陷问题：当父容器里的子元素设置了float属性后，子元素会脱离正常的文档流，导致父容器无法感知到子元素的高度，从而出现高度塌陷（父容器高度为0或者无法包裹子元素的情况）。

而给父容器添加overflow:hidden属性，本质是触发了Block Formatting Context（块级格式化上下文，简称BFC）。BFC有一个核心特性：它会包含容器内部所有的浮动元素，让父容器能够正确计算自身的高度，从而解决塌陷问题。

示例代码解析 #

以下是示例中的核心代码展示：

HTML部分

<div class="parent">
  <div class="child left-float">左侧浮动元素</div>
  <div class="child right-float">右侧浮动元素</div>
</div>

CSS部分

.parent {
  background: #eee;
  /* 移除该属性时，父容器会出现高度塌陷 */
  overflow: hidden; 
}

.child {
  width: 50%;
  padding: 20px;
  box-sizing: border-box;
}

.left-float {
  float: left;
  background: #ccc;
}

.right-float {
  float: right;
  background: #ddd;
}

当你移除parent类里的overflow:hidden时，父容器的背景色#eee会消失（因为高度塌陷为0）；加上该属性后，父容器会正常包裹住两个浮动的子元素，背景色也能正常显示。

其他替代方案 #

除了overflow:hidden，还有几种更灵活的方式可以解决浮动塌陷问题：

• 使用clearfix伪元素：这是最通用的方案，不会像overflow:hidden那样可能隐藏容器内超出的内容

  .parent::after {
    content: "";
    display: table;
    clear: both;
  }
  

• 使用display: flow-root：CSS3新增的属性，专门用来触发BFC，没有overflow:hidden的副作用
• 给父容器设置浮动：但这会改变父容器本身的布局特性，需谨慎使用

内容的提问来源于stack exchange，提问作者Lberteh