CSS--BFC

块级格式化上下文

BFC的布局规则

1. 内部的box会在垂直方向一个一个的放置
2. box的垂直方向的距离由margin决定，属于同一个BFC的相邻BFC margin会发生重叠
3. BFC的区域不会与float box重叠
4. 计算BFC的高度时，浮动元素也参与计算

如何创建BFC

1. overflow： 不为visible( hidden)
2. float的值不是none
3. display的值是inline-block、table-cell、flex、table-caption或者inline-flex
4. position的值不是static或者relative。

BFC的作用

1.创建BFC避免同一个BFC的相邻BFC margin会发生重叠
两个BFC块
两个p

2. 每个盒子的margin box的左边，与包含块border box的左边相接触(对于从左往右的格式化，否则相反)。即使存在浮动也是如此
   给单独的right一个BFC,因为BFC的区域不会与float box重叠
   p float
   p 会环绕在float里
3. 清除浮动
   普通的父及不会把子元素（有浮动）的高度算进去，这个时候就给父亲算上一个BFC
   如果是BFC, 会把子元素的高度算进去

BFC就是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面的元素