BFC-块级格式化上下文
先了解下FC:(Formitting Context)
CSS2.1规范中的一个概念,他是页面中的一块渲染区域,并且有一套渲染规则,它决定了其子元素如何定位,以及和其他的元素的关系和相互作用,最常见BFC,IFC。(css3增加了GFC,FFC)
再了解下Box:
Box是css布局的基本单位;
元素的类型和display属性决定了Box类型,
Block-level box :
display:block , list-item, table , 会生成Block-level Box ; 并且参与BFC
inline-level box :
display:inline , inline-block , inline-table , 会生成inline-level Box ; 并且参与IFC
run-in box : CSS3中有
BFC定义:他是一个独立的渲染区域,只有block-level-box参与,它规定了内部的block-level box如何布局,并且与这个区域外部毫不相干。
如何触发BFC ?
1.根元素 (html;
2.float不为none;
3.over-flow:不为visible; 为hidden,scroll,auto;
4.display:inline-block, table-cell , table-caption, flex;
5.position:absolute, fixed;
BFC布局规则:
1.内部盒子会在垂直方向上,一个一个地放置i;
2.盒子垂直方向的距离由margin决定,属于同一个BFC的两个相邻Box的上下margin会重叠;
3每个元素的左边与包含块的左边相接触,即使存在浮动也是如此;
4.BFC的区域不会与float重叠;
5.BFC就是页面上一个隔离的独立容器,容器里面的子元素不会影响到外面的元素,反之也如此;
6.计算BFC高度时,浮动元素也参与计算;
BFC作用及原理:
1.自适应两栏布局(不与浮动元素相重叠)
对非浮动元素设置overflow:hidden ------>触发BFC,形成BFC区域
2.清除内部浮动(计算BFC高度时,浮动元素也参与计算)
对外部父元素形成BFC区域
3.防止margin重叠(属于同一个BFC区域的两个相邻Box的margin会重叠)
让两个元素不属于同一个BFC,就不会发生margin重叠