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的功能:
常用来清除浮动