加深理解BFC

1、相关定义

1.1 Formatting context

Formatting context是W3C CSS2.1规定中的一个概念。它是页面中的一块渲染区域，并且有一套渲染规则，它决定了其子元素如何定位，以及和其他元素的关系和相互作用。最常见的Formatting context有Block formatting context（简称BFC）和Inline formatting context（简称IFC）。
css2.1中只有BFC和IFC，css3中还增加了GFC和FFC。

1.2 BFC定义

BFC(Block formatting context)直译为“块级格式化上下文”。它是独立的渲染区域，只有Block-level box参与，它规定了内部的Block-level Box如何布局，并且与这个区域外部毫不相干。

1.3 BFC布局规则：

• 内部的Box会在垂直方向，一个接一个地放置；
• Box垂直方向地距离由margin决定。属于同一个BFC的两个相邻Box的margin会发生重叠
• 每个元素的margin box的左边，与包含块border box的左边相接触（对于从左往右的格式化，否则相反）。即便存在浮动也是如此。
• BFC的区域不会与float box重叠。
• BFC就是页面的一个隔离的独立容器，容器里面的子元素不会影响到外面的元素。反之也如此。
• 计算BFC的高度时，浮动元素页参与计算。

2、作用

2.1 可生成BFC的元素

• 根元素html；
• float属性不为none；
• position为absolute或fixed；
• display为inline-block， table-cell，table-caption，flex， inline-flex；
• overflow不为visible；

2.2 场景一：对于两栏或三栏浮动自适应布局，包含块边接触问题。

<style>
    .left-center-right.float .left {
        float: left;
        width: 200px;
        height: 100px;
        background-color: rgba(0, 0, 0, 0.7);
    }

    .left-center-right.float .center {
        background-color: rgb(13, 218, 233);
        height: 200px;
    }

    .left-center-right.float .right {
        float: right;
        width: 200px;
        height: 150px;
        background-color: rgb(189, 109, 109);
    }
</style>
<section class="left-center-right float">
    <article class="left">我是左边区域块</article>        
    <article class="right">我是右边区域块</article>
    <article class="center">我是中间区域块</article>
</section>

中间自适应栏边界会延展左右浮动区域

此时需要把中间栏变成BFC

.left-center-right.float .center {
    background-color: rgb(13, 218, 233);
    height: 200px;
    overflow: hidden;
}

2.3 场景二：子级元素有浮动，父级元素塌陷问题

<style>
    .all-children-float .left {
        float: left;
        width: 200px;
        height: 100px;
        background-color: rgba(0, 0, 0, 0.7);
    }

    .all-children-float .right {
        float: right;
        width: 200px;
        height: 150px;
        background-color: rgb(189, 109, 109);
    }
</style>
<section class="all-children-float">
    <article class="left">我是左边区域块</article>
    <article class="right">我是右边区域块</article>
</section>

此时需要将父级元素变成BFC

.all-children-float {
    position: absolute;
}

2.3 场景三：垂直方向margin出现重合

<style>
    .verticle-block .block1 {
        width: 200px;
        height: 150px;
        background-color: rgb(13, 218, 233);
        margin: 20px;
    }

    .verticle-block .block2 {
        width: 150px;
        height: 150px;
        background-color: rgb(189, 109, 109);
        margin: 30px;
    }
</style>
<section class="verticle-block">
    <article class="block1">我是区域块1</article>
    <article class="block2">我是区域块2</article>
</section>

Box垂直方向的距离margin决定，属于同一个BFC的两个相邻Box的margin会发生重叠。

我们的做法是包一层标签，并转化成BFC。

.wrapper1 {
    overflow: hidden;
}

<section class="verticle-block">
    <div class="wrapper1">
        <article class="block1">我是区域块1</article>
    </div>        
    <article class="block2">我是区域块2</article>
</section>