2018-04-03 BFC是啥

block formatting context 块级格式化上下文

BFC 就是这样的东西（堆叠上下文也是）
它没有定义
它只有特性/功能

inline-block：不是块的块

功能一：爸爸管儿子
用 BFC 包住浮动元素。(这 TM 不是清除浮动，.clearfix 才是清除浮动）

image.png

我们发现，爸爸包不住儿子
解决：用BFC，让其能够包住儿子
1、让其爸爸浮动
float:left;

image.png
2、让其爸爸绝对定位
position:absolute;
3、让其爸爸display:inline-block；table-cell；table-caption；flow-root

4、让其爸爸over-flow不为visible（比如auto）
重点讨论：上面的除了display:flow-root以外，其他的实现了功能（包住儿子）之前，还有副作用（比如浮动了，定位了等），flow-root（最新出的，很多浏览器不支持）只触发BFC功能

同一个块格式化上下文中的相邻块级盒之间的竖直margin会合并

image.png image.png
sunzi跑出去了，baba没包住
son里有float:left，也是个BFC，sunzi在son里面，baba就不管sunzi了
原因： image.png
http://jsbin.com/jegejohuwu/1/edit?html,css,output

功能2：兄弟之间划清界限

image.png

让哥哥和弟弟界限分开

image.png
让弟弟触发BFC image.png
上面的问题
image.png
image.png
http://jsbin.com/biqizusiyu/1/edit?html,css,output image.png

baba没有加BFC，其上边界在2那个地方，不在1

image.png

overflow:hidden有副作用，用display:flow-root（IE不支持）最好，意思都是BFC
也可不用BFC来解决：加个border-top：1px solid red;

image.png