关于BFC

1.什么是BFC?

  BFC是Block farmatting context 的简写。翻译过来即：块级格式化上下文。farmatting context
   简单理解就是一种渲染规则， 规定了页面

上元素如何渲染，元素与元素之间的关系。具体就BFC来说，此规则或者说此渲染区域具有块与块之间
相互独立，内部元素互不影响的特点。




  BFC的布局规则：
 

• 内部元素会在垂直方向按顺序排列。

• 接上条规则,垂直顺序排列的元素的距离取决于margin的大小。相邻的两个元素的margin会重叠。

• 每个元素的左边会尽可能的去接触盒子（形成BFC的元素）的左边。

• BFC的元素不会和float的元素重叠。

• BFC的元素内外互不影响。

• BFC高度包含浮动元素高度。

2.如何生成BFC

 常见的：

1. float属性为非none时，如left,right。

2. position属性为fixed或者absolute时。

3. display属性为inline-block或者为table-cell时。

4. overflow为非visible时。

3.BFC有什么用？

1.可以清除浮动：

//清除浮动前的代码：
//css:
    .box{
            border:1px solid red;
            width: 400px;
        }
    .inner-box{
            float: left;
            width: 200px;
            height: 100px;
            background: #ccc;
        }
        
 //html
<div class="box">
    <div class="inner-box"></div>
    <div class="inner-box"></div>
</div>        
        

 可以看到边框为红色的div因为浮动塌陷了，我们给此div加上overflow：hidden,形成BFC:

//css
  .box{
            border:1px solid red;
            width: 400px;
            overflow: hidden;
        }
        .inner-box{
            float: left;
            width: 200px;
            height: 100px;
            background: #ccc;
        }
        
//html:     

<div class="box">
    <div class="inner-box"></div>
    <div class="inner-box"></div>
</div>

 可以看到div被撑起来了。用的以下规则：

BFC高度包含浮动元素高度。

2.左边固定，右边自适应布局：

 //css
   .box{
        border:1px solid red;
        width: 400px;
        height: 300px;
        position: relative;
    }
    .a{
        float: left;
        width: 200px;
        height: 100px;
        background: olivedrab;
    }
    .b{
        background: #777;
        height: 300px;
    }
    
    //html:
         <div class="box">
            <div class="a">我是a</div>
            <div class="b">我是b</div>
        </div>
        
     

(可以用这个做做文字环绕图片什么的。。)

再看加上float,形成BFC:

//css
 .box{
            border:1px solid red;
            width: 400px;
            height: 300px;
        }
        .a{
            float: left;
            width: 200px;
            height: 100px;
            background: olivedrab;
        }
        .b{
            background: #777;
            height: 300px;
            overflow: hidden;
        }
        
//html
<div class="box">
    <div class="a">我是a</div>
    <div class="b">我是b</div>
</div>

左边就自适应宽度了。规则：

overflow为非visible时。

3.解决margin重叠问题：

//css
 .box{
            border:1px solid red;
            width: 400px;
            height: 300px;
        }
        .a{

            width: 400px;
            height: 100px;
            background: olivedrab;
            margin-bottom: 100px;
        }
        .b{
            background: #777;
            height: 100px;
            overflow: hidden;
            margin-top: 100px;
        }
        
//html
<div class="box">
    <div class="a">我是a</div>
    <div class="b">我是b</div>
</div>

 看代码可以知道a的margin-bottom加b的margin-top 等于 100+100，然而空白区域只有100像素。这就是发生了margin重叠！
 
 那我们如何来解决这个问题呢？我们知道有这个规则：

接上条规则,垂直顺序排列的元素的距离取决于margin的大小。相邻的两个元素的margin会重叠。

 那我们反其道而行之不就行了吗！ 于是我们改造结构，让a和b不在同一个BFC内： 
 

//css

  .box{
            border:1px solid red;
            width: 400px;
        }
        .a{

            width: 400px;
            height: 100px;
            background: olivedrab;
            margin-bottom: 100px;
        }
        .b{
            background: #777;
            height: 100px;
            overflow: hidden;
            margin-top: 100px;
        }
        .b-box{
            overflow: hidden;
        }
        
//html


<div class="box">
    <div class="a">我是a</div>
    <div class="b-box">
        <div class="b">我是b</div>
    </div>
</div>

可以看到，距离为200PX了。

---------------------------------------结束分割线--------------------------------------------------------------------

以前总是听别人说BFC，专门了解了一下写了此文章。忘了拿出来看看。说不定面试也会问到一些呢。- - 暂时就写到这里了。有什么问题请多多吐槽。