CSS 的BFC

BFC是什么

含义是：block formatting context上下文可以理解为（区域）

block formatting context

表示被隔离的区间：（BFC的子元素不会对外面的元素产生影响）

1.普通流

2.定位流

3.浮动流

0.BFC的规则

1.BFC就是一个块级元素，块级元素会在垂直方向一个接一个的排列。

2.BFC就是页面中一个隔离的独立容器，容器里的标签不会影响到外部标签。

1.CSS使用了以下的属性，会触发BFC

body:天生的BFC元素。

float: left | right;

display: inline-block |  table-cell  |  table-caption | flex | grid;  只要不等于block ，inline,  none  就是BFC 

overflow: hidden | scroll  |  auto ; 只要不是默认visible;

position: absolute | fiexed   只要不是relative就是BFC

2.使用BFC会产生的问题。

1.两个块级元素之间，margin重合的问题。

2.父盒子跟随子盒子margin塌陷问题。

3.父盒子高度坍塌问题。