为何设置overflow:hidden能让父元素重新包裹其浮动子元素？

嘿，这个问题其实戳中了CSS里一个很关键的概念——块级格式化上下文（Block Formatting Context，简称BFC），我来给你讲明白其中的门道：

首先，你已经搞懂了浮动的核心问题：浮动元素会脱离正常文档流，父元素如果没有设置固定高度，就没法感知到浮动子元素的存在，自然会出现高度塌陷，边框也就包不住子元素了。

那为什么加了overflow:hidden就好了？这不是因为它“隐藏溢出”的功能，而是因为当元素的overflow属性值不为visible时，会自动触发该元素创建一个BFC。

BFC有几个非常实用的特性，其中正好解决你问题的就是：BFC会包含内部所有的浮动元素。简单来说，一旦父元素变成了BFC，它就会把内部所有浮动的子元素都纳入自己的高度计算范围，不再让它们“逃出”自己的边界，自然就能重新包裹住子元素了。

你提到的“设置固定高度时overflow:hidden会隐藏溢出”的情况，其实是BFC的另一种表现——当父元素高度被固定，内部元素高度超出时，BFC的“裁剪超出内容”特性就生效了。但在你当前的场景里，父元素没有固定高度，所以BFC会优先根据内部浮动子元素的高度来自动计算自身高度，这时候就不会触发溢出隐藏，只会解决高度塌陷的问题。

顺便提一下，除了overflow:hidden，还有很多方式能触发BFC，比如：

• 给元素设置float: left/right（注意别让父元素自己也浮动跑了）
• 设置position: absolute或position: fixed
• 把display改成inline-block、table-cell、flex这类值
• 设置overflow: auto或overflow: scroll

下面是你给出的示例代码，方便对照理解：

HTML代码 #

<div class="parent">
  <div class="child1"></div>
  <div class="child2"></div>
</div>

CSS代码 #

.parent {
  border: 10px solid red;
  width: 700px;
  overflow: hidden;
}
.child1 {
  height: 325px;
  width: 100px;
  background: blue;
  float: left;
}
.child2 {
  height: 1000px;
  width: 100px;
  background: green;
  float: right;
}

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