CSS规范中的BFC

一、什么是BFC

1.Formatting context:页面中的一块渲染区域，并且有一套渲染规则，它决定了其子元素将如何定位，以及其他元素的关系和相互作用。

2.Box：css布局的基本单位。元素的类型和display属性决定了这个box的类型。不同类型的box，会参与不同的Formatting Context（决定如何渲染文档）。

　　block-level box：display属性是block、list-item，table的元素，参与block Formatting context

　　inline-level box：display属性是inline，inline-block，inline-table的元素，参与inline formatting context

3.BFC定义

　　块级格式化上下文，他是一个独立的渲染区域，只有block-level box参与，规定了内部的block-level box如何布局，并且与这个区域外部没有关系

4.BFC布局规则

　　1.内部的box会在垂直方向，一个接一个地放置

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

　　3.内部每个元素的margin box的左边，与包含块border box的左边相接触，浮动也是如此

　　4.BFC的区域不会与float box重叠

　　5.BFC就是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面的元素

　　6.计算BFC的高度时，浮动元素也参与计算

二、生成的BFC的元素

1.根元素

2.float属性部位none

3.position为absolute或fixed

4.display为table-cell，table-caption，flex，inline-flex

5.overflow不为visible

三、BFC的作用及原理

1.自适应两栏布局

示例代码：

     #aside{
        float: left;
        width: 400px;
        height: 400px;
        background-color:skyblue;
    }
    #main{
        height: 600px;
        background-color: grey;
    }

    <div id='aside'></div>
    <div id='main'></div>

内部元素的margin的左边与包含块的左边接触，效果：

因为BFC区域不与float box重叠，设置overflow：hidden，使得main生成BFC

2.清除浮动

示例代码：

    .par {
        border: 5px solid #fcc;
        width: 300px;
    }
 
    .child {
        border: 5px solid #f66;
        width:100px;
        height: 100px;
        float: left;
    }

    <div class="par">
        <div class="child"></div>
        <div class="child"></div>
    </div>

效果图：

BFC计算高度时，浮动元素也会参与计算，触发par生成BFC

    .par {
        border: 5px solid #fcc;
        width: 300px;
       overflow: hidden;
    }

3.防止垂直margin重叠

示例代码：

    p {
        color: #f55;
        background: #fcc;
        width: 200px;
        line-height: 100px;
        text-align:center;
        margin: 100px;
    }

    <p>Haha</p>
    <p>Hehe</p>

两个p标签是同一个BFC的内部box，内部相邻的box的margin发生重叠，效果：

将p包裹一个容器，生成一个BFC，两个p就不在同一个BFC中，就不会发生折叠

   .wrap{
        overflow: hidden;
    }
    p {
        color: #f55;
        background: #fcc;
        width: 200px;
        line-height: 100px;
        text-align:center;
        margin: 100px;
    }

    <div class='wrap'>
        <p>Haha</p>
    </div>
    <p>Hehe</p>

CSS规范中的BFC

推荐阅读