BFC详解

BFC

BFC（Block Formatting Context）即块级格式化上下文。

官方给出的定义：一个BFC 区域包含创建该上下文元素的所有子元素，但是不包括创建了新的BFC的子元素的内部元素，BFC是一块块独立的渲染区域，可以将BFC看做是元素的一种属性，拥有了这种属性的元素就会使它的子元素域外隔绝，不会影响到外部其它元素。

具体用代码表示是什么意思呢？

我们假设father和son4是两个BFC区域，那么根据上述定义：father这个BFC区域包含了son1，son2，son3，son4，但不包含grandChild1，grandChild2，而son4这个BFC区域包含了grandChild1,grandChild2这两个子元素。

总结：

• 每一个BFC区域只包含其子元素，不包含其子元素的子元素
• 每一个BFC区域都是独立隔绝的，互不影响

哪些属性会触发一个元素编程BFC区域：

• overflow: 不是visible，即hidden，scroll，auto
• display: inline-block，table-cell，flex，grid
• position: absolute，fixed
• float：不为none，即left，right
• body元素

BFC解决的问题：

1、相邻块元素垂直外边距合并

当上下相邻的两个块元素（兄弟关系）相遇时，如果上面的元素有下外边距 margin-bottom，下面的元素有上外边距 margin-top ，则他们之间的垂直间距不是 margin-bottom 与 margin-top 之和。取两个值中的 较大者这种现象被称为相邻块元素垂直外边距的合并。

<div class="box1">1</div>
<div class="box2">2</div>

要解决这个问题可以只需要给这两个盒子都添加一个父盒子，并且将父元素设置成BFC区域。
在不创建新的BFC的情况下，可以给父元素添加border或者padding

<div class="boxBfc">
    <div class="box1">1</div>
</div>
<div class="boxBfc">
    <div class="box2">2</div>
</div>

div.box1,
div.box2 {
	width: 100px;
	height: 100px;
	margin: 20px;
	background-color: skyblue;
}
	
div.boxBfc {
	overflow: hidden;
	/* 在不创建新的BFC的情况下解决外边距塌陷问题 */
    box-sizing: border-box;
    padding: 1px;
    border: 1px solid lightcoral;
}

2、嵌套块元素垂直外边距的塌陷

对于两个嵌套关系（父子关系）的块元素，父元素有上外边距的同时子元素也有上外边距，此时父元素会塌陷较大的外边距值。

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

div.boxBfc {
    width: 200px;
    height: 200px;
    margin-top: 10px;
    background-color: lightcoral;
}

div.boxBfc div.box1 {
    width: 100px;
    height: 100px;
    margin-top: 50px;
    background-color: skyblue;
}

我们想让父盒子距离上面是10px，子盒子距离父盒子为50px，显然都没有实现。我们利用BFC也可以解决这个问题。

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

div.boxBfc {
    width: 200px;
    height: 200px;
    margin-top: 10px;
    background-color: lightcoral;
    overflow: hidden;
	/* 在不创建新的BFC的情况下解决外边距塌陷问题 */
    box-sizing: border-box;
    padding: 1px;
    border: 1px solid lightcoral;
}

div.boxBfc div.box1 {
    width: 100px;
    height: 100px;
    margin-top: 50px;
    background-color: skyblue;
}

3、清除浮动

我们都知道，浮动会导致元素脱离文档流，致使父元素高度塌陷，而我们都知道清除浮动可以给父元素添加overflow:hidden，但是很多人可能不知道这样清除浮动的原理。

其原理就是：因为 overflow: hidden 触发了 BFC，计算BFC高度时，浮动元素的高度也参与计算。而BFC区域内的子元素不会影响外界的其他元素。

4、两栏布局

我们还可以利用BFC实现两栏布局，一边固定，另一边自适应。

<div class="left">左</div>
<div class="right">右</div>

.left {
    width: 100px;
    height: 150px;
    float: left;
    background-color: plum;
}

.right {
    height: 200px;
    background-color: lightskyblue;
}

此时可以看到，浮动的元素盖住了原本的文档流元素，我们只需要给右边的盒子添加BFC即可。

.right {
    height: 200px;
    background-color: lightskyblue;
    overflow: hidden;
}