BFC

1.什么是BFC

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

2.BFC的原理（渲染规则）
（1）BFC垂直方向边距重叠问题
（2）BFC的区域不会与浮动元素的box重叠
（3）BFC是一个独立的容器，外面的元素不会影响里面的元素
（4）计算BFC高度的时候浮动元素也会参与计算

3.建立BFC的条件有哪些

(1)浮动元素的float不是none

(2)绝对定位元素position不为relative或static

(3)内联块display为inline-block , table-cell , table-caption 中的任何一个。

(4)具备overflow且值不是visible的块元素(auto, scroll, hidden)

4.情景
（1）垂直方向边距重叠问题

<style>
    html * {
        margin: 0;
        padding: 0;
    }
    .margin {
        background: yellowgreen;
        overflow: hidden;
    }
    .margin > p {
        margin: 10px auto 20px;
        background: red;
        height: 30px;
    }
</style>
<section class="margin">
    <p>1</p>
    <p>2</p>
    <p>3</p>
</section>
复制代码

咱们发现下边距的宽度都为20px,根据边距重叠原则，取最大边距。那么问题来了，咱们如何让边距不重叠呢？

<style>
    html * {
        margin: 0;
        padding: 0;
    }
    .margin {
        background: yellowgreen;
        overflow: hidden;
    }
    .margin  p {
        margin: 10px auto 20px;
        background: red;
        height: 30px;
    }
    .overflow {
        overflow: hidden;
        background: blue;
    }
</style>
<section class="margin">
    <p>1</p>
    <div class="overflow">
        <p>2</p>
    </div>
    <p>3</p>
</section>
复制代码

如上，咱们在第二个p标签外层加了div标签，加入样式overflow: hidden;解决了边距重叠的问题。效果以下：

（2）布局问题（BFC与float的重叠）

<section class="layout">
    <style>
        .layout {
            background: yellow;
        }
        .layout .left {
            float: left;
            width: 50px;
            height: 50px;
            background: red;
        }
        .layout .right {
            height: 70px;
            background: blue;
        }
    </style>
    <div class="left"></div>
    <div class="right"></div>
</section>
复制代码

咱们发现右侧蓝色色块比左侧高出20px，高出的部分占据了红色色块下方的位置。这是由float元素的特性致使的。单大多数状况下咱们并不想这样，这时咱们该如何解决这个问题呢？

<style>
    .layout .right {
        height: 70px;
        background: blue;
        overflow: auto;
    }
</style>
复制代码

如上：咱们加入样式 overflow: auto 使用 BFC的元素不会与float元素相互重叠的特性使左右两侧区分开来。整个section的颜色也显示了出来。便达到了咱们想要的结果。

（3）清除浮动

<section class="clear">
    <style>
        .clear {
            background: gold;
        }
        .clear .float {
            float: left;
            font-size: 30px;
        }
    
    </style>
    <div class="float">
        float element
    </div>
</section>
复制代码

咱们发现section元素的高度为0，这是由于子元素div为浮动元素，父元素的高度计算不包含float元素。这时将父元素设置为BFC以后子元素的浮动元素将一样参与到高度计算中。
BFC子元素即便是float也会参与高度计算

<style>
    .clear {
        background: gold;
        
        overflow: auto;
        或
        float: left;
    }
</style>
复制代码

如上，咱们加入overflow: auto或float: left,解决了问题。