BFC(块级格式化上下文)

2016年09月03日Web前端0

上一篇文章写了很长时间，是关于css布局的。既然涉及到了布局，BFC当然是不能错过的，所以在这篇文章中说明。

BFC全称”Block Formatting Context”, 中文为“块级格式化上下文”。 Formatting context 是 W3C CSS2.1 规范中的一个概念。它是页面中的一块渲染区域，并且有一套渲染规则，它决定了其子元素将如何定位，以及和其他元素的关系和相互作用。最常见的 Formatting context 有 Block fomatting context (简称BFC)和 Inline formatting context (简称IFC)，CSS3中还增加了GFC和FFC。

我们都知道，一个页面是由多个box组成的，而元素的类型或是display类型决定了这个box是何种类型的，当然也决定了它是如何被渲染的。block-level box（块级元素）参与BFC布局，inline-level box（行内元素）参与IFC布局。

BFC是一个独立的渲染区域，只有block-level box参与，他自己规定内部的block-level box如何排列，并且不会影响外部的元素，当然，外部的元素也不会影响BFC中的元素。

BFC的布局规则

  • 内部的Box会在垂直方向，一个接一个地放置。
  • Box垂直方向的距离由margin决定。属于同一个BFC的两个相邻Box的margin会发生重叠
  • 每个元素的margin box的左边， 与包含块border box的左边相接触(对于从左往右的格式化，否则相反)。即使存在浮动也是如此。
  • BFC的区域不会与float box叠加。
  • BFC就是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面的元素，反之亦然。
  • 当计算BFC的高度时，浮动元素也参与计算。

哪些属性会触发生成BFC

  • 根元素
  • float属性不为none
  • position为absolute或fixed
  • display为inline-block, table-cell, table-caption, flex, inline-flex
  • overflow除了visible 以外的值（hidden，auto，scroll ）

BFC的应用

1.布局

*{padding:0px;margin:0px}
.left{float:left;width:200px;height:200px;background-color:#ccc}
.right{height:300px;background-color:olive}
<div class="left"></div>
<div class="right"></div>

以上代码的效果图，结果大家都能猜的到。

BFC1

但是给right加上一个overflow:hidden后，哈哈就可以实现简单的两列布局了。当然这是利用了BFC区域不会与float元素重合的特点。

BFC2

2.垂直方向maring塌陷

html{background-color:red;}
.left{height:100px;width:100%;margin-bottom:100px;background-color:#ccc;float:left;}
.right{height:100px;margin-top:100px;background-color:olive;}
<div class="left"></div>
<div class="right"></div>

此时,第一个div虽然有100px的下外边距，第二个div有100px的上外边距，但是实际上两元素之间的距离只有100px（红色的body背景），发生了margin的塌陷。

BFC3

为了处理塌陷，可以让两个div处于不同的BFC中，所以，塌陷消失了。

*{padding:0px;margin:0px}
html{background-color:red;}
.left{height:100px;margin-bottom:100px;background-color:#ccc;overflow:hidden;}
.right{height:100px;margin-top:100px;background-color:olive;overflow:hidden;}
.cont{overflow:hidden;}
<div class="left"></div>
<div class="cont">
    <div class="right"></div>
</div>

BFC4

3.清除浮动，让浮动元素撑起父元素的高度

*{padding:0px;margin:0px}
.box{background-color:#ccc;}
.left{float:left;width:200px;height:100px;background-color:#abc;}
<div class="box">
    <div class="left"></div>
</div>

BFC5

这种情况下，浮动元素无法撑起父元素的高度，给他设置背景也就相当于没有设置，当给父元素设置overflow:hidden后，情况就变了（clear:both也是可以达到这效果的），他就可以包含自己的浮动子元素了。

BFC6

其实BFC就是个独立的盒子，外部不影响内部，内部不影响外部。

CSS

目录