BFC总结

    针对BFC，主要需要了解其触发条件，具体深入理解及使用还需要联系实际应用。初次学习BFC所做笔记，以后有更深认识会再进行补充。

BFC（block formatting context）块格式化上下文
是Web页面的可视化CSS渲染出的一部分，是块级盒布局出现的区域，也是浮动层元素进行交互的区域。

    1. BFC特性

    在页面上有一个独立隔离容器，容器内的元素和容器外的元素布局不会相互影响。也可以理解为内部子元素再怎么翻江倒海，翻云覆雨都不会影响外部的元素。
     一个块格式化上下文包括创建它的元素内部所有内容，除了被包含于创建新的块级格式化上下文的后代元素内的元素。（即不包括孙子元素）

     块格式化上下文对于定位 (参见 float) 与清除浮动 (参见 clear) 很重要。定位和清除浮动的样式规则只适用于处于同一块格式化上下文内的元素。浮动不会影响其它块格式化上下文中元素的布局，并且清除浮动只能清除同一块格式化上下文中在它前面的元素的浮动。

    2. BFC触发条件

1）根元素或其它包含它的元素

2）浮动元素 (元素的 float 不是 none)

3）绝对定位元素 (元素具有 position 为 absolute 或 fixed，不为relative和static)

4）内联块 (元素具有 display: inline-block)

5）表格单元格 (元素具有 display: table-cell，HTML表格单元格默认属性)

6）表格标题 (元素具有 display: table-caption, HTML表格标题默认属性)

7）具有overflow 且值不是 visible 的块元素，（auto,scroll,hidden）

8）display: flow-root

9）column-span: all 应当总是会创建一个新的格式化上下文，即便具有 column-span: all 的元素并不被包裹在一个多列容器中。

    3. BFC自适应布局优势：

1）自适应内容由于封闭，更健壮，容错性强。比方说，内部clear:both不会与兄弟float产生矛盾。而纯流体布局，clear:both会让后面内容无法和float元素在一个水平上，产生布局问题。

2）自适应内容自动填满浮动以为区域，无需关心浮动元素宽度，可以整站大规模应用。而纯流体布局，需要大小不确定的margin/padding等值撑开合适间距，无法CSS组件化。

    4. 类似清除浮动的通用类语句：

加clearfix类

.clearfix {
  *zoom: 1;
}
.clearfix::after {
  content: ''; 
  display: table; 
  clear: both;
}

两栏或多栏自适应布局的通用类语句是（block水平标签，需配合浮动）：

.cell {
  display: table-cell; 
   9999px;
  *display: inline-block; 
  * auto;
}

    5. 文档流 V.S. BFC

文档流影响元素的排列顺序

BFC影响元素的宽高计算规则

    6. BFC的应用场景

触发BFC，实现清除浮动的效果，真正的清除浮动：同4

float + div：实现自适应布局

爸爸和儿子，儿子上的margin会传出去，加上BFC就传不出去