css-BFC

1.概念

BFC（Block Formatting Context），块级格式上下文，他是页面中的一块渲染区域，并且有一套属于自己的渲染规则

-内部盒子会在垂直方向上一个接一个的放置

-对于同一个BFC的两个相邻的盒子的margin会发生重叠，与方向无关

-每个元素的左外边距 与 包含块的左边界相接触，即使浮动元素也是如此

-BFC的区域不会与float的元素区域重叠

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

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

BFC目的是形成一个相对于外界完全独立的空间，让内部的子元素不会影响到外部的元素

2.触发条件

-根元素：即html元素

-浮动元素：flaot值为left或者right

- overflow的值不为visible，为auto，scroll，hidden

- display的值为：inline- block，intable-cell，table- caption，table，inline-table，flex,inline-flex,grid,inline-grid

-position的值为absolute和fixed

 

3.应用场景

-防止margin重叠

-清除内部浮动

-自适应多栏布局