开启掘金成长之旅！这是我参与「掘金日新计划 · 12 月更文挑战」的第1天，点击查看活动详情

前言：

成功没有捷径但成长有路径

css必备场景。专注积累，每天记录一个知识点，老概念新理解，重点记录一下

背景

我们背面试题经常会刷到，问怎么清浮动， 你肯定会说出其中一条， 父元素添加overflow：hidden， 通过触发BFC， 实现清浮动。但有思考过吗， BFC是什么， 为什么BFC可以清除浮动呢。面试题上都写得很简单，看了很多文章感觉理解了一遍，但是面试时候不懂其中逻辑硬背的还是就忘了，这篇文章简单介绍下我理解的BFC以及在工作中的应用场景。

基础

BFC解释一下就是我们把一块特殊形成的容器盒子称为BFC。 基础这里就不介绍了，他的形成规则跟怎么触发，请参考官方文档：文档。

主要用途

1. 解决margin垂直方向重叠(Margin Collapse)
2. 清浮动(使用float脱离文档流， 高度塌陷)

解决margin重叠问题

垂直方向，相邻的元素同时设置有margin，实际margin值会重叠，值取其中较大的那个，其根本原理就是它们处于一个html的BFC，符合“属于同一个BFC的两个相邻元素的margin会发生重叠”的规则，当然你会想到给两个元素margin隔离开，给他们其中一个加上overflow:hidden变成BFC，符合"BFC是一个立容器，容器里面的子元素不会影响到外面的元素"的规则，但是怎么加呢，给box1直接加overflow:hidden，此时的box1确实形成了BFC，但是margin还是在box1身上，并没有解决box1,box2同处于html的BFC这个问题 margin还是重叠的。所以我们要给box1套一层， 然后给box1外层的盒子设置BFC.

解决浮动问题

文章开头提到的，给父元素设置overflow：hidden可以清除子元素的浮动。为什么BFC可以解决这个问题：当在父元素中设置overflow：hidden时就会触发BFC，符合“计算BFC的高度时，浮动元素也参与计算“规则，BFC就把浮动的子元素高度当做了自己内部的高度去处理，所以外面看起来是清除了浮动。

总结

其实这两个方法是属于一类问题，我们对使用到的父元素有一个重要要求就是高度为auto， 这样才能根据子元素高度来计算，BFC中子元素高度计算标准是，到其下边缘margin，如果有浮动元素，也计算其高度和下边缘margin。(需要注意的是，绝对定位元素不会计算在内，所以我们无法通过BFC解决绝对定位的脱离文档流高度塌陷问题)。