在解释BFC是什么之前,需要先介绍Box、Formatting Context的概念。
Box CSS布局的基本单位
Box是CSS布局的对象和基本单位,直观点来说,就是一个页面是由很多个Box组成的。 元素的类型和displhy 属性,决定了这个Box的类型。不同类型的Box,会参与不同的Formatting Context(一个决定如何渲染文档的容器),因此Box内的元素会以不同的方式渲染。让我们看看有哪些盒子:
block-level box:display 属性为block,list-item,table的元素,会生成block-level box。并且参与block fomatting context(BFC);
inline-level box:display 属性为inline,inline-block,inline-table的元素,会生成inline-level box。并且参与inline formatting context(IFC)
Formatting context
Formatting context是W3CCSS2.1规范中的一个概念。它是页面中的一块渲染区域,并且有一套渲染规则,它决定了其子元素将如何定位,以及和其他元素的关系和相互作用。
最常见的Formatting context有Block fomatting context(简称BFC)Inline formatting context(简称IFC)。
BFC是什么(块级格式化上下文)
BFC(Block formatting context)直译为“块级格式化上下文”。它是一个独立的渲染区域,只有Block-level box参与,它规定了内部的(不包括自己)Block-levelBox如何布局,并且与这个区域外部毫不相干
BFC布局规则:
1、内部的Box会在垂直方向,一个接一个地放置。
2、BFC的区域不会与float box重叠。
3、内部的box垂直方向的距离由margin决定。属于 同一个BFC的两个相邻 的BOX的margin会发生重叠
4、计算BFC高度时,浮动元素也会被计算在内(清楚浮动haslayout)
5、BFC就是页面上一个隔离的区域,外面不会影响到内部爱,内部也不会影响到外面
BFC什么时候出现(哪些会生成BFC?)
根元素
float属性不为none
position为absolute或fixed
overflow不为visible
display为inline-block,table-cell,table-caption,flex,inline-flex
应用例子
在两列布局中,需要一边固定,另一边自适应,在没有开启BFC时,右边div会由于左边发生浮动的原因挤了上去,结果图看起来也算勉强实现了两列布局,但是打开调试器你们看到,右边的盒子是站满了一行的,并不算真正的两列布局
.left{
float: left;
width: 200px;
height: 500px;
background-color: pink;
}
.right{
height: 500px;
background-color: #bfc;
/*overflow: hidden;*/
}
<div class="left">left</div>
<div class="right">right</div>
根据BFC的规则则可以避免浮动元素其他盒子重叠的问题,因此可以在右边元素添加overflow:hidden使之成为BFC盒子