BFC浅析

1.定义

BFC(Block formatting context)即"块级格式化上下文"。它是一个独⽴的渲染区域，只有Block-level box参与， 它规定了内部的Block-level Box如何布局，并且与这个区域外部无关。
block-level box:display 属性为 block, list-item, table 的元素，会生成 block-level box。并且参与 block fomatting context；

2.BFC布局的规则:

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

3.如何生成BFC?

- 根元素;
- float属性不为none;
- position为absolute或fixed;
- display为inline-block, table-cell, table-caption, flex, inline-flex;
- overflow不为visible.

4.BFC的作用

- 清除内部浮动,防止父元素塌陷

.wrap{
            /*overflow: hidden;*/如果不在wrap生成一个BFC,内部div浮动,其父div的高度就会塌陷.
            width:300px;
            border:1px solid red;
        }
        .inner{
            float:left;
            width:100px;
            height:100px;
            background-color: blue;
        }

        .outer{
            width:120px;
            height:150px;
            background-color: green;
        }
         <div class="wrap">
        <div class="inner">inner</div>
        </div>
        <div class="outer">outer</div>

- 防止垂直方向margin 重叠

       .wrap{
            width:300px;
            border:1px solid red;
        }
        .top{

            width:100px;
            height:100px;
            background-color: blue;
            margin-bottom: 100px;
        }

        .bottom{
            margin-top: 100px;
            width:100px;
            height:100px;
            background-color: green;
        }
        <div class="top">top</div>
        <div class="bottom">bottom</div>

上面两个div的垂直间距在页面上其实只有100px;这是因为它们同处在根元素的BFC中,同一个BFC的两个相邻Box的margin会发生重叠(具体多少,从两个margin的值中取大值).解决方式的话就是让它们处于不同的BFC中,可以在其中一个div外面套一个div,外面的div设置overflow:hidden;

.wrap{
            overflow: hidden;
            width:300px;
            border:1px solid red;
        }
        .top{

            width:100px;
            height:100px;
            background-color: blue;
            margin-bottom: 100px;
        }

        .bottom{
            margin-top: 100px;
            width:100px;
            height:100px;
            background-color: green;
        }
         <div class="wrap">
        <div class="top">top</div>
        </div>
        <div class="bottom">bottom</div>

总之,BFC就是一个独立的容器,它里面的元素和外面的元素互不影响.