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
网友评论