BFC定义及实现方式

BFC定义:

BFC是块级格式化上下文(Block Formatting Context)，是Web页面一块独立的渲染区域，内部元素

的渲染不会影响边界以外的元素。

BFC布局规则 :

内部盒子会在垂直方向，一个接一个地放置；

盒子垂直方向的距离由margin决定，属于同一个BFC的两个相邻Box的margin会发生重叠;

 BFC的区域不会与float box重叠;

BFC就是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面的元素,反之也如此;

计算BFC的高度时，浮动元素也参与计算;

BFC实现方式：

(1)使用浮动float;

(2)overflow不是`visible`，为 `auto`、`scroll`、`hidden` ;

(3)display不是`none`，为`table`、`flex`、`grid`、`inline-block`等;

(4)position是fixed或者absolute;

BFC的功能:

常用来清除浮动