Box:盒模型
(bloack块盒、inline行盒、)
FC:Formatting Context
格式化上下文
Format,Formatting
IFC:inline Formatting Context
直译:行级格式化上下文
BFC:Block Formatting Context
直译:块级格式化上下文
定义:
页面中CSS渲染的一个部分(区域)。
主要是用于“决定”盒子的布局以及浮动(相互影响的范围)的一个“区域”。
BFC之间互不影响。
##如何产生BFC(触发BFC)
1、根元素
2、float值不为none
3、position值为absolute或者fixed
4、display值为inline-block、
table-cell、
table-caption、
flex、
inline-flex
5、overflow不为visible
触发BFC后,BFC的布局规则:
1、内部的块级元素在垂直方向上,一个接一个的放置。
2、块级元素垂直方向Margin重叠,取最大值。(同一个BFC中的两个相邻元素)
3、每个元素的Margin box的左边,与包含块的border box的左边相接触(即使是浮动也是如此)
4、BFC的区域不会与float重叠。
5、BFC是一个独立的区域(容器),容器里面的子元素不会影响外面的元素。
6、计算BFC的高度时,浮动元素也要参与计算。