学前端已经有一段时间了，最近在对前端基础知识做一个梳理总结，今天联系页面的时候遇到了一个浮动元素造成父级高度塌陷的问题，为了弄清楚这个问题，我也是好一番查资料，原来MDN上专门介绍过解决这个问题的办法，下面我就来分享一下我个人的心得。

首先，我先说一下我遇到的问题是什么？

下面是两个容器元素box和box1，其中box1是子元素。

<div class="box">
    <div class="box1"></div>
</div>

这是元素的CSS样式。

<style>
body{
    background-color: #121212;
}
.box {
  border-radius: 8px;
  padding: 16px;
  background-color: #121212;
  border: 3px solid #ffffff;
}
.box1 {
  width: 200px;
  height: 200px;
  overflow: hidden;
  background-color: rgb(196, 233, 30);
}
</styl

这是上面HTML和CSS渲染出来的效果图。

现在我对box1加上一个CSS样式：float:left;那么现在的渲染效果就变成了这样：

从效果图上我们可以看到，父级元素的高度没了，子元素出现在了父元素的外面，并没有完全被父级元素包裹住，这是因为子元素box1添加了float:left;之后脱离了文档流，所以无法被包含了。

脱离正常文档流的元素会自动创建一个新的块级格式化环境，也就是我们常说的BFC（Block Formatting Context），通常情况下，只有根元素一个块级上下文。但是上述的元素box1设置了float:left就会为这个块级元素创建一个独立的上下文环境，因此这个元素的排版会完全独立于内部，所以父级元素无法包裹这个元素，因此它的高度会塌陷。

脱离常规文档流的元素：

如何解决父级高度塌陷的问题？

方案一：给父级元素加上一个float:left

但是这样又出现了一个问题：父级的宽度丢失了，无法自适应页面的宽度了，因此该方法不推荐使用。

方案二：给子元素box1加上display:inline-block

该属性也可以解决父级高度塌陷的问题，但是同样会造成父级宽度缺失，也不是最优解。

方案三：父级元素添加overflow:auto

通过这个属性可以完美地解决父级高度塌陷的问题，并且不会引起其它问题，所以MDN上也推荐使用这个方式去解决这个问题。通常为了不让子元素的内容溢出容器，我们也可以使用overflow:hidden属性，效果也是一样的。

不过值得注意的是，这个BFC模式在IE下并不生效，但是可以通过添加zoom:1的属性达到类似效果。不过我个人觉得这个目前用到的机会不多了，毕竟IE连它的亲爹都放弃他了[看][看][看]估计除非是一些上古项目可能会用到。至于这个效果大家也可以去IE下测试一下，欢迎大家在评论区一起交流。由于本人也属于前端萌新，如果有说的不足或者错误的地方还请各位大佬批评指正，感激不尽。