BFC

[autonomic learning]什么是BFC？
BFC可以解决的问题：
1.（BFC与margin）同一个父级块框下，兄弟元素和父子元素的margin会发生重叠问题
2.（BFC与float）父元素高度塌陷问题、兄弟元素覆盖问题

1. def（定义）：块级格式化上下文

2. create/触发：
   （满足下列任意一个或多个条件即可触发bfc）

   根元素或其它包含它的元素; //
   float不为none； //浮动
   position：absolute/fixed；//绝对定位和固定定位
   display：inline-block； //inline-block，flex，inline-flex，table-cell
   表格单元格 display：table-cell；
   overflow不为visible; //hidden触发bfc
   display：flex/inline-flex；

3. 约束规则：
   • 生成BFC元素的子元素会一个接一个的放置。垂直方向上他们的起点是一 个包含块的顶部，俩个相邻子元素之间垂直距离取决于元素margin特 性。在BFC中相邻的块级元素外边距会折叠。
   • 生成BFC元素的子元素中，每一个子元素的外边距和包含块的左边界相接 触，（对于从右到左的格式化，右外边距和右边界相接触），除非这个 子元素也创建了一个新的BFC（如它自身也是一个浮动元素）。

4.特性（two examples）：
【1】阻止垂直外边距折叠
属于同一个BFC的两个相邻块级子元素（元素都要在文档流中）的上下margin会发生重叠—— 分为两个BFC就可以消除这种margin 重叠。具体做法如下，添加了一个.div4，给两个兄弟块级子元素中的任意一个加bfc。如果要是父子结构的，就给父级元素加bfc。

    <style>
    .dv {
        width: 400px;
        height: 400px;
        border: 1px solid slateblue;
    }
    .dv2 {
        width: 200px;
        height: 100px;
        background: salmon;
        margin-bottom: 30px;
        overflow: auto;
    }
    .dv3 {
        width: 200px;
        height: 100px;
        margin-top: 60px;
        background: seagreen;
    }
    .div4{
        position: absolute;
        //float: left;等等上述触发bfc的任意条件
    }
    </style>

    <div class="dv">
        <div class="dv2"></div>      
           <div class="div4">
           <div class="dv3">
             IE6、IE7中， // function foo(){ // console.log(a); // } // function bar(){ // var a =3 ;
          </div>
        </div> 
  </div>

【2】包含浮动元素
我们用一个例子说明一下

内容会环绕着浮动元素

    <style>
        .second{
               width: 400px;
               padding: 10px;
               border: 1px solid slateblue;   
           }
           .float{
               float: left;
               width: 200px;
               height: 50px;
               background: salmon;
           }
           .s1{
               background: slategray; 
           }     
       </style>  

    <div class="second">
        <div class="float">
        </div>
        <div class="s1"> 
            IE6、IE7中， // function foo(){ // console.log(a); // } // function bar(){ // var a =3 ;
            IE6、IE7中， // function foo(){ // console.log(a); // } // function bar(){ // var a =3 ;
        </div>
    </div>  

需求1：清除环绕（为其本身创建bfc）
若是给.s1{position:absolute;}会造成橘色块（下）与文字块（上）上下排列，边框变成文字块的高度；
若是给.s1{float:right;}会造成橘色块（上）与文字块（下）上下排列，边框变成文字块的高度；
若是给.s1{overflow: hidden;}

特别地当元素里面的文字较少时，父元素会出现高度坍塌，浮动元素脱离文档流，父元素高度随着文本的减少而降低。

所以我们的需求2：改变坍塌（为父级元素添加bfc）
.second{overflow: hidden;}

扩展：一个可以直接触发BFC的属性display:flow-root；
实际上BFC就是一个属性/功能，它更好的帮助我们理解css的可视化格式模型。