什么是BFC?
BFC:块级格式化上下文,它是指一个独立的块级渲染区域,只有Block-level Box参与,该区域拥有一套渲染规则来约束块级盒子的布局,且与区域外部无关。
BFC的生成(触发):
1.float的值不为none(left或right);
2.overflow的值不为visible;
3.display的值为inline-block、table-cell、table-caption;
(display:table也认为可以生成BFC,这里的主要原因在于Table会默认生成一个匿名的table-cell,正是这个匿名的table-cell生成了BFC。)
4.position的值为absolute或fixed;
BFC的规则:
1.如果给一个元素创建了一个BFC,就相当于创建了一个新的容器,容器内和容器外中的元素不会相互影响。外边的BFC规则,不会对容器里的BFC产生影响,而容器里面的BFC也不会对容器外的BFC产生影响,也就是相互隔绝,互不影响。
2.box的布局开始是从包含容器的顶部开始的。
3.同一个BFC中,在两个相邻的块级元素中,垂直margin会发生折叠。
4.BFC的区域不会与float box重叠。
5.计算BFC的高度时,浮动元素也参与计算。
6.每个元素的左外边距与包含块的左边界相接触(从左到右,反之亦然),即使浮动元素也是如此。
(这说明BFC中的子元素不会超出它的包含块,而position为absolute的元素可以超出它的包含块边界);
BFC的应用:
1.防止垂直方向margin重叠。
正常文档流里的两个box垂直距离会以margin值较大的为准,这里就发生了margin重叠。
根据第一点规则,只需给其中一个box外套一个div并触发它的BFC即可消除margin重叠。
2.浮动子元素使其父级高度塌陷,找回高度。
浮动子元素会使其父级高度塌陷为0,
根据第五点规则,这时可以触发父级的BFC使其找回高度。
3.多栏布局(清除浮动)。
根据第四点规则,BFC的区域不会与浮动元素重叠,以此来消除浮动。
更可以借此达到多栏布局的效果。
中间box根据确定左右浮动的元素宽度自适应布局。