css基础篇（四）——BFC

1.BFC(Block Formatting Context)是什么

Formatting context是W3C CSS2.1规范中的一个概念。它是页面中的一块渲染区域，并且有一套渲染规则，它决定了其子元素将如何定位，以及和其他元素的关系和相互作用。

一个环境中的元素不会影响到其它环境中的布局.比如浮动元素会形成BFC,浮动元素内部子元素主要受该浮动元素影响,两个浮动元素之间是互不影响的。也可以说BFC就是一个作用范围。可以把它理解成是一个独立的容器，并且这个容器里box的布局，与这个容器外的好不相干。

赶脚听不懂，说人话(举个栗子)

<meta http-equiv="Content-Type" content="text/html; charset=utf-8">

    <title>无标题</title>

<style type="text/css">

body{margin:0;padding: 0;}

#red,#green,#blue,#yellow{100px;height:100px;float:left;}

#red{background-color:red;}

#green{background-color:green;}

#blue{background-color:blue;}

#yellow{background-color:yellow;}

</style>   

<div id="c1">

    <div id="red"></div>

    <div id="green"></div>

</div>

<div id="c2">

    <div id="blue"></div>

    <div id="yellow"></div>

</div>

<p>o0o0o0o0o0</p>

效果如图：

场景描述：该段代码本意要形成两行两列的布局,但#red,#green,#blue,#yellow 设置了float：left;使得这四个div在同一个布局环境BFC中，因此虽然它们位于两个不同的div（#c1和#c2）中，但仍然不会换行，而是一行四列的排列

在说解决方案之前先说说BFC是怎么产生的?

2.怎么产生BFC

当一个HTML元素满足下面任何一个条件都会产生BFC

• (1)float的值为none(如上面栗子：四个div设置了float：left，则在同一个BFC中)
• (2)overflow的值不为visible
• (3)display的值为table-cell,table-caption,inline-block;
• (4)position的值为absolute,fixed

解决方案：若要使之形成两行两列的布局，就要创建两个不同的布局环境，也可以说要创建两个BFC(上文红字已有说明,创建两个BFC后,每个BFC里的box都不会影响当前BFC意外的元素)

方法一：设置overflow让#c1,#c2都产生两个BFC

		#c1,#c2{
			overflow: hidden;
		}
	

上面创建了两个BFC。内部元素的做浮动不会影响到外部元素。所以#c1和#c2没有受到浮动的影响，仍然各自占据一行

方法二：设置position让#c1,#c2都产生两个BFC

		#c1{
			position: absolute;
		}
		#c2{
			position: absolute;
			top: 100px;
		}
	

3.BFC的作用

BFC作用都是根据BFC的特性来解决一些问题,这里先总结一下BFC的特性

• (1)内部的Box会在垂直方向，从顶部开始一个接一个地放置。
• (2)Box垂直方向的距离由margin决定。属于同一个BFC的两个相邻Box的margin会发生叠加
• (3)每个元素的margin box的左边， 与包含块border box的左边相接触(对于从左往右的格式化，否则相反)。即使存在浮动也是如此
• (4)BFC的区域不会与float box叠加。
• (5)计算BFC的高度时，浮动元素也参与计算。

3.1 浮动元素重叠现象

场景描述:如图：上图中红块设置了float：left与没有产生BFC的蓝块发生了重叠

解决方法：根据特性4，对蓝块使用任何一种产生BFC的条件就行

3.2 清除浮动

CSS2.1 规范中，在进行普通流中的块级非替换元素的高度计算时，浮动子元素不参与计算

CSS2.1 规范中在计算生成了 BFC的元素的高度时，其浮动子元素应该参与计算。(特性5)

解决方案：触发外部容器BFC，高度将重新计算。比如给outer加上属性overflow:hidden触发其BFC。