6 BFC机制

BFC全称是Block Formatting Context，即块格式化上下文。它是CSS2.1规范定义的，关于CSS渲染定位的一个概念。它是一个独立的渲染区域，只有Block-level box参与， 它规定了内部的Block-level Box如何布局，并且与这个区域外部毫不相干。

6.1 BFC布局规则

1. 内部的Box会在垂直方向，一个接一个地放置；
2. Box垂直方向的距离由margin决定。属于同一个BFC的两个相邻Box的margin会发生重叠；
3. 每个元素的margin box的左边， 与包含块border box的左边相接触(对于从左往右的格式化，否则相反)。即使存在浮动也是如此。；
4. BFC的区域不会与float box重叠，常用来清除浮动和布局。；
5. BFC就是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面的元素。反之也如此。；
6. 计算BFC的高度时，浮动元素也参与计算；

   6.2 会生成BFC的元素

• 根元素或其它包含它的元素；
• 浮动 (元素的float不为none)；
• 绝对定位元素 (元素的position为absolute或fixed)；
• 行内块inline-blocks(元素的 display: inline-block)；
• 表格单元格(元素的display: table-cell，HTML表格单元格默认属性)；
• overflow的值不为visible的元素；
• 弹性盒 flex boxes (元素的display: flex或inline-flex)；

  6.3 BFC的范围

  BFC的范围在MDN中是这样描述的。

  A block formatting context contains everything inside of the element creating it that is not also inside a descendant element that creates a new block formatting context.

中文的意思一个BFC包含创建该上下文元素的所有子元素，但不包括创建了新BFC的子元素的内部元素。
插入一段代码方便理解

<div class='div_1 BFC'>
     <div class='div_2'>
         <div class='div_3'></div>
         <div class='div_4'></div>
      </div>
      <div class='div_5 BFC'>
           <div class='div_6'></div>
         <div class='div_7'></div>
     </div>
</div>

div_1创建了一个块格式上下文，这个上下文包括了div_2、div_3、div_4、div_5。即div_2中的子元素也属于div_1所创建的BFC。但由于div_5创建了新的BFC，所以div_6和div_7就被排除在外层的BFC之外。
这就代表着一个元素不能同时存在于多个BFC中。
BFC的一个最重要的效果是，让处于BFC内部的元素与外部的元素相互隔离，使内外元素的定位不会相互影响。这是利用BFC清除浮动所利用的特性。

6.4 BFC的常用方式：

6.4.1 子级浮动导致父级高度塌陷

<style type="text/css">
        .box{
            width: 900px;
            background: black;
              height: 300px; // 增加高度
        }
        .box1{
            height: 300px;
            width: 300px;
            background: red;
            float: left;
        }
        .box2{
            height: 300px;
            width: 300px;
            background: blue;
            float: left;
        }
    </style>
......
<div class="box">
    <div class="box1"></div>
    <div class="box2"></div>
</div>

上面的代码定义了3个块，一个父级包含了两个子集，但是父级的背景颜色无法显示，是因为子集元素浮动导致了父级高度的塌陷。

在为box设置BFC后，box的高度才能找回来。

从而显示出正确的样式。

6.4.2 子级margin-top将父级带下 为父级触发BFC

一个盒子有上边距 另一个有下边距 会出现margin边距的重叠问题
并列盒子的margin重写=>双margin的重叠
-> 取大值 并不是他们相加之和 也就是谁大听谁的

要将黑色块中的小红块下移一点，直接使用了margin-top，结果黑块一起下移了。

<style type="text/css">
        .box{
            width: 300px;
            height: 300px;
            background: black;
        }
        .box1{
            height: 100px;
            width: 100px;
            background: red;
            margin-top: 50px;
        }
    </style>
......
<div class="box">
    <div class="box1"></div>
</div>

而设置了BFC后，就能正确的下浮红色块

margin的兼容问题:margin top的传递问题

大盒子里面嵌套小盒子 给小盒子加margin-top 不但没有实现和大盒子之间的间距 反而传递给大盒子身上 导致整体下移动
解决兼容性问题

1. overflow:hidden 解决margin-top的传递问题(此处并没有溢出隐藏)
2. padding-方位:1px 这种方法影响最后实际宽高 需要在width/height上基础上减掉才不会影响最后实际的宽高
3. border-top:1px 这种方法会影响最后实际的高度 需要在高度height上基础上减掉 才不会影响最后实际的高度
4. 给子元素的margin-top的值改成父元素的padding-top,这样就避免使用margin-top值导致传递的问题