BFC的解释
BFC,全称Block Formatting Context,块级格式化上下文。它是一块独立渲染的区域,它规定了在该区域中,常规流块盒的布局。常规流块盒在水平方向上,必须撑满包含块,在垂直方向上依次摆放。
BFC渲染区域
1、根元素(html)
2、浮动和绝对定位元素
3、overflow不等于visible的块盒
不同的BFC区域,它们进行渲染时,互不干扰。
创建BFC的元素,隔绝了它内部和外部的联系,内部的渲染不会影响到外部。
具体规则:
创建BFC元素,它的自动高度需要计算浮动元素。
创建BFC元素,它的边框盒不会与浮动元素重叠。
创建BFC元素,不会和它的子元素进行外边距合并。