CSS中的BFC

BFC(Block Formatting Context)就是块级格式化上下文

一个BFC区域包含创建该上下文元素的所有子元素，但是不包括创建了新的BFC的子元素的内部元素

BFC是一块块独立的渲染区域，可以将BFC看成是元素的一种属性，拥有了这种属性的元素就会使他的子元素与世隔绝，不会影响到外部其他元素

<div class="box1">
    <div class="box2"></div>
    <div class="box3"></div>
    <div class="box4">
        <div class="box5"></div>
        <div class="box6"></div>
    </div>
</div>
假设box1和box4是两个BFC区域，那么box1这个BFC区域包含了子元素box2，box3，box4，但不包括box5和box6
而box4这块BFC区域则包含了box5和box6元素

每一个BFC区域只包括其子元素，不包括其子元素的子元素

每一个BFC区域都是独立隔绝的,互不影响

使一个元素变成BFC区域

设置float浮动，不包括none
设置position定位，值为absoulte或者fixed
设置display为inline-block(行内块级盒子)或flex(弹性布局)
设置overflow为hidden，auto或scroll(除了visible)

那么在实际开发中，BFC有什么作用呢？

1、解决margin垂直塌陷(外边距合并)

外边距合并：在CSS中，当两个元素垂直方向上的上下边距相邻时，会进行外边距合并，取两个外边距中较大的值作为合并后的值，并不是等于我们预想的两个边距相加

第一种情况：上下外边距相邻：

一般在两个同级元素之间发生
<div class="demo"></div>
<div class="demo"></div>
style样式：
.demo{background:red;width:100px;height:100px;margin:100px;}
以上两个div盒子外边距都为100px，按理说垂直距离应该为200px
但根据外边距合并的规则，两个盒子的上下边距相邻，那么取较大的值100px，这就是margin垂直塌陷

要解决这个问题只需要给这两个盒子加一个父元素，并将父元素设置为BFC区域，就可以解决垂直塌陷为题
<div style="overflow:hidden;"><div class="demo"></div></div>
<div style="overflow:hidden;"><div class="demo"></div></div>

第二种情况：上边距相邻或下边距相邻

一般在父元素和子元素之间发生
<div class="father">
    <div class="son"></div>
</div>
style样式：
.father{width:300xp;hright:300px; background:red;}
.son{width:100px;height:100px; background:blue;margin-top:100px;}
很明显以上代码我们预想的是子元素距离父元素顶部100px
但根据外边距合并的规则，父盒子和子盒子的上边距是相邻的，那么取较大的值100px作为整个盒子整体的上边距
因为是父盒子包含了子盒子，所以这里体现为父盒子的上边距
就是说父元素产生了margin-top:100px的效果，但子元素与父元素顶部距离仍然是0

我们可以使用padding来解决这个问题，也可以使用BFC来解决，将父元素设置为BFC区域
.father{width:300xp;hright:300px; background:red;overflow:hidden;}

2、解决float高度塌陷

<div class="father">
    <div class="son"></div>
    <div class="son"></div>
</div>
style样式：
.son{width:100px;height:100px;background:red;float:left;}

以上代码中由于子元素浮动，父元素及父元素的不浮动子元素在布局时会忽略浮动元素

父元素在计算高度的时候浮动元素不会参与计算，导致父元素最终高度为0，这就是浮动的高度塌陷

要解决这个问题我们有几种方法：

1) 将父元素手动设置高度，不易控制，不推荐该方法
2) 将父元素也设为浮动，但是这样整体的页面布局就会打乱
3) 将父元素设置为BFC区域.father{overflow:hidden;}
4) 在父元素最后添加一个不浮动的块级盒子，并设置其css的clear属性值为both
    该属性值表示该元素在布局时要计算浮动元素，那么该元素在布局时就会放置在浮动元素后面，也就把父元素的盒子“撑起来”了
<div class="father">
    <div class="son"></div>
    <div class="son"></div>
    <div style="clear:both"></div>
</div>
在实际开发中这样写比较麻烦，一般是利用css的after伪类实现类似功能
.father::after{
    content:'';
    display:block;
    clear:both;
}

3、清除浮动

浮动会导致父元素高度塌陷，将父元素设置为：overflow：hidden就可以解决该问题

4、阻止标准流元素被浮动元素覆盖

浮动的元素会脱离文档流，可能会导致浮动元素覆盖基本元素的问题

<div class="float"></div>
<div calss="normal"></div>
style样式
.float{width:200px;height:200px;background:red;float:left;}
.normal{helght:300px; background:blue;}
normal元素没有设置宽度会按照100%显示，float元素浮动会导致该元素覆盖在normal元素上面
此时如果我们将normal元素设置为BFC区域
.normal{helght:300px; background:blue;overflow:hidden;}
此时float元素在左，normal在右，两者不再有重叠，且normal元素的宽度自动设置为除float元素之外的剩余宽度
利用这个特性，可以实现normal盒子宽度根据float盒子的宽度来做自动适应