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就是个独立的盒子,外部不影响内部,内部不影响外部。