BFC简介
BFC(Block formatting context)直译为"块级格式化上下文"。它是一个独立的渲染区域,只有Block-level box参与, 它规定了内部的Block-level Box如何布局,并且与这个区域外部毫不相干。
Box是css布局的对象和基本单位,直观点来说就是一个页面由很多个Box组成的,元素的类型display属性,决定了这个Box的类型,不同类型的Box,会参与不同的 Formatting Context(一个决定如何渲染文档的容器),因此Box内的元素会以不同的方式渲染。接下来看看有哪些盒子:
①block-level box:display 属性为 block, list-item, table 的元素,会生成 block-level box。并且参与 block fomatting context;
②inline-level box:display 属性为 inline, inline-block, inline-table 的元素,会生成 inline-level box。并且参与 inline formatting context;
Formatting Context格式化上下文
Formatting context 是 W3C CSS2.1 规范中的一个概念。它是页面中的一块渲染区域,并且有一套渲染规则,它决定了其子元素将如何定位,以及和其他元素的关系和相互作用。
最常见的 Formatting context 格式化上下文有 Block fomatting context (简称BFC)和 Inline formatting context (简称IFC)。
BFC布局规则
(1)内部的Box会在垂直方向,一个接一个的放置。
(2)Box垂直方向的距离有margin决定,属于同一个BFC的两个相邻Box的margin会发生重叠。
(3)每个元素的margin box的左边,与包含块border box的左边相接触,(对于从左往右的格式化,否则相反),即使存在浮动也是如此。
(4)BFC的区域不会与float box重叠。
(5)BFC就是页面上的一个隔离的独立容器,容器里面的子元素不会影响到外面的元素,反之也如此。
(6)计算BFC的高度时,浮动元素也参与计算(清除浮动)。
ul–li–float------父级–高度塌陷----overflow:hidden----触发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
overflow:hidden—触发BFC属性—BFC的区域不会与float box重叠
激活BFC属性,激活后此区域就是BFC区域
BFC的应用- - -浮动覆盖问题
每个元素的margin box的左边, 与包含块border box的左边相接触。即使存在浮动也是如此。
因此,虽然存在浮动的元素aslide,但main的左边依然会与包含块的左边相接触。
案例:
.box{
width: 100px;
height: 150px;
background: rgba(0,0,0,.5);
float: left;
}
.Box{
width: 300px;
height: 200px;
background: orangered;
}
我们可以通过触发main生成BFC, 来实现自适应两栏布局。当触发main生成BFC后,这个新的BFC不会与浮动的aside重叠。效果如下:
.box{
width: 100px;
height: 150px;
background: rgba(0,0,0,.5);
float: left;
}
.Box{
width: 300px;
height: 200px;
background: orangered;
/*不会重叠*/
overflow: hidden;
}
清除浮动影响(元素浮动后造成父级高度塌陷)
ul{
width: 100%;
height: auto;
background: rgba(0,0,0,.2);
}
ul li{
width: 20%;
height: 40px;
line-height: 40px;
text-align: center;
float: left;
list-style: none;
}
解决方法:
垂直方向上的兄弟元素会发生边距重叠(听从较大的margin外边距)。
.heZi1{
width: 150px;
height: 150px;
background: palevioletred;
margin-bottom: 20px;
}
.heZi2{
width: 150px;
height: 150px;
background: paleturquoise;
margin-top: 30px;
}
方案:
可以在任意一个元素外面再包裹一层容器,并触发该容器生成一个BFC。那么两个块便不属于同一个BFC,就不会发生margin重叠了。