BFC学习

什么是BFC？

BFC全称是Block Formatting Context，块级格式化上下文。在官方文档到中是这么介绍的：一个BFC区域包含创建该上下文元素的所有子元素，但是不包括创建了新的BFC的子元素的内部元素，BFC是一块块独立的渲染区域，可以将BFC看成是元素的一种属性，拥有了这种属性的元素就会使他的子元素与世隔绝，不会影响到外部其他元素
简单来说，创建一个BFC，相当于创建一个容器，容器里面元素样式不会影响容器外部样式。

如何创建BFC？

怎么让一个节点成为BFC区域？

给父级元素添加以下属性
1、overflow: hidden;
2、 display: flex
3、display: inline-flex;
4、 display: inline-block
5、 display: flow-root
6、 position:absolute
7、 position: fixed

BFC应用场景

为什么要创建BFC？具体解决了哪些问题？
1、解决外边距margin的塌陷问题(垂直塌陷)

<div class="container">
    <div class="box">1</div>
    <div class="box">2</div>
</div>

.container {
    width: 500px;
    border: 1px solid red;
}
.box {
    background: pink;
    background-size: 100% 100%;
    width: 200px;
    height: 100px;
    font-size: 48px;
    color: #fff;
    margin: 50px;
}

每个box各有50px的间距，理论上，上下应该间距100px；但是实际渲染中，上下只有50px；这就是所谓的垂直塌陷问题。

可以尝试为两个box个创建一个拥有BFC属性的父级元素用以解决该问题。
修改后的代码结构如下：

<div class="container">
    <div class="bfc">
        <div class="box">1</div>
    </div>
    <div class="bfc">
        <div class="box">2</div>
    </div>
</div>

.bfc {
    display: flow-root;
}

渲染后的结果如预期展示

2、利用BFC解决高度塌陷问题
解决当父级元素没有高度时，子级元素浮动会使父级元素高度塌陷的问题
例如众所周知的高度塌陷：float元素带来的父级元素的高度塌陷问题。

<div class="container">
    <div class="box fl">1</div>
    <div class="box fr">2</div>
</div>

.fl {
    float: left;
}
.fr {
    float: right;
}

实际渲染的时候父级高度为0，导致外边框并没有完全包裹内部的2个box

此时如果为父级元素加上BFC属性，则可以有效解决

<div class="container bfc">
    <div class="box fl">1</div>
    <div class="box fr">2</div>
</div>

修改后的渲染

3、解决包含塌陷问题
解决子级元素外边距会使父级元素塌陷的问题
问题

<div class="container">
    <div class="box">1</div>
</div>

.container {
    width: 500px;
    height: 200px;
    background: red;
}

.box {
    background: pink;
    width: 200px;
    height: 100px;
    font-size: 48px;
    color: #fff;
    margin: 50px;
}

渲染结果

可以看到，实际渲染与预期不符，预期中应该是子元素距离父元素top：50px而不是父元素距离顶部50px

修改html中样式

<div class="container bfc">
    <div class="box">1</div>
</div>

渲染结果

上面这个在实际中发现通过为父元素设置border，同样可以实现相同的效果，不知道border是否创建了BFC

.container {
    width: 500px;
    height: 200px;
    border: 1px red solid; 
}

渲染结果

4、可以阻止浮动元素遮挡正常文档流

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

.box1 {
    width: 100px;
    height: 100px;
    background: palevioletred;
    float: left;
}

.box2 {
    height: 200px;
    background: peru;
}

渲染后的结果

为box2创建BFC

<div class="box1"></div>
<div class="box2 bfc"></div>

渲染后的结果

这么做可以带来一个好处，box2的宽度可以随box1自适应。

注意

这里重点强调下 display:flow-root；该属性可以无副作用的创建BFC，其他的属性或多或少的都会改变一些布局，但是使用的时候需要注意兼容性的问题。