BFC 块级格式上下文的定义创建特点和常见用途

Posted Kabukiyo Lin

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了BFC 块级格式上下文的定义创建特点和常见用途相关的知识,希望对你有一定的参考价值。

BFC的定义

概况如下:

  • BFC 即 Block - Formatting - Context,它是一个仅有块级盒子参与的独立渲染区域。
  • BFC 规定了这个独立渲染区域内的参与元素(块级盒子)是如何布局的
  • BFC 是一个独立渲染区域,与外部区域无瓜葛。

BFC的创建

若一个元素具备以下任一特性,则可创建一个新的BFC:

  • 根元素
  • float不为none,即 float:left 或 float:right
  • position不为static,relative,即 position:absolute,position:fixed
  • overflow不为visible,即 overflow:auto,overflow:hidden,overflow:scroll
  • display:inline-block,display:flex,display:inline-flex,display:table-caption,display:table-cell

注意,块级盒子不创建BFC,因为它是 参与 BFC的内部元素。

BFC的特点

BFC是一个独立渲染区域,内部元素与外部毫无关系。

  • ① 在一个BFC内,盒子会在垂直方向上一个接一个地排列。
  • ② 在一个BFC内,相邻盒子的margin-bottom和margin-top会发生叠加,即外边距叠加
  • ③ 在一个BFC内,每一个元素(包括浮动元素),其左外边界会紧挨着包含盒子的左边。
  • ④ 在一个BFC内,若有一个内部元素生成一个新的BFC,并且有内部元素是浮动元素,该BFC不会与浮动元素的区域重叠。
  • ⑤ 计算一个BFC的高度时,内部浮动元素也会参与计算。

BFC的用途

BFC的用途可与BFC的特点作一些映射和对应

① 创建BFC,从而消除垂直外边距叠加的现象

根据BFC的第二个特点:

在一个BFC内,相邻盒子的margin-bottom和margin-top会发生叠加,即外边距叠加。

有时候我们不想出现这样的现象,那么如何去避免?

注意,第二个特点的前提条件是 “在一个BFC内”

也就是说在同一个BFC内相邻盒子才会发生这种外边距叠加的现象,那么只要让它们不在同一个BFC就好。

那就通过创建BFC,使得两个盒子不在同一个BFC内,则能消除这个现象。

例一、

<div id='wrapper'>
	<div id='a-box'>
		aaa
	</div>
	<div id='b-box'>
		bbb
	</div>
</div>

wrapper设置了overflow:hidden,创建了一个BFC。
该BFC有两个内部元素,即a块级盒子和b块级盒子。

#wrapper{
	width:200px;
	border:1px solid black;
	overflow:hidden;   
}
#a-box{
	width:50px;
	height:50px;
	margin-bottom:30px;
	background-color:red;
}
#b-box{
	width:50px;
	height:50px;
	margin-top:20px;
	background-color:pink;
}

这样的话,a和b盒子之间的margin,并不是50px,而是30px。

修改
给a-box另外加一个盒子

<div id='wrapper'>
	<div id='a-wrapper'>
		<div id='a-box'>aaa</div>
	</div>
	<div id='b-box'>bbb</div>
</div>
#a-wrapper{
	overflow:hidden
}

这样a-box就属于a-wrapper这个BFC了,b-box还是属于wrapper这个BFC,不是同一个BFC,则不会发生外边距叠加。

② 创建BFC,清除浮动带来的影响

根据BFC的第五个特点:

计算一个BFC的高度时,内部浮动元素也会参与计算。

都知道,若子元素是浮动元素,而父元素不方便设置高度的话,会发生高度塌陷这个问题。

也知道,可以通过父元素设置overflow:hidden解决高度塌陷的问题,那到底是为什么呢?

实际上,给父元素设置了overflow:hidden,相当于创建了BFC,让父元素成为了一个BFC,则父元素内的元素,都满足BFC的特点。

那么,根据 “计算BFC的高度,其浮动元素也会参与计算”,即父元素的高度会由浮动元素的高度所填充,就不会发生塌陷了。

③ 创建BFC,构建自适应两列布局

两列布局,一列固定宽度,一列是自适应。这算是老生常谈的一个布局了,它的实现原理是:

  • 给side-bar设置左浮动和固定宽度
  • 给main-content设置overflow-hidden
<div id='side-bar'>side bar</div>
<div id='main-content'>main content</div>
#side-bar{
	float:left;
	width:200px;
	height:200px;
	background-color:red;
}
#main-content{
	height:300px;
	overflow:hidden;
	background-color:pink;
}

那么为什么呢?

实际上也是和BFC有关。

看看BFC的第三条规则:

在一个BFC内,每一个元素(包括浮动元素),其左外边界会紧挨着包含盒子的左边。

怎么理解额,先这样看:

如果没有给main-content设置overflow:hidden,那么side-bar和main-content都是同一个BFC内的元素,效果是这样

在这里插入图片描述
佐证了第三点特点。

那两列布局,正是因为给main-content设置了overflow:hidden,使得其创建了新的BFC,那么其左边界挨着的就是side-bar的右边界了。

而不是和原来side-bar一样都是挨着外边盒子的左边。

设置BFC实现两列布局,实际上佐证的是第四点特点:

在一个BFC内,若有一个内部元素生成一个新的BFC,并且有内部元素是浮动元素,该BFC不会与浮动元素的区域重叠。

main-content就是新的BFC,原本BFC中的side-bar是浮动元素。确实,新创建的BFC不会与浮动元素区域重叠。

以上是关于BFC 块级格式上下文的定义创建特点和常见用途的主要内容,如果未能解决你的问题,请参考以下文章

BFC--块级格式化上下文

BFC 块级格式化上下文

BFC 块级格式化上下文

BFC

CSS块级元素布局格式

什么是BFC