关于BFC(块级格式化上下文)的种种

• 关于定义

BFC的简单定义为一个独立的渲染区域，只有Block-level Box参与,它规定了内部Block-level Box如何布局，并且这个区域与外部毫不相干。

• BFC对于浮动和清除浮动来说非常重要
  举个例子：
  
  图中如果页面正中的文字是比较少的话看着是比较正常的，但是当我们需要继续添加下一个标题时，我们一般希望标题是左对齐的，但是如果直接添加的话，结果是不如人意的，就像这样：
  
  一般采用clear：both的方法并不适用于所有情况，因为这个方法只适用于同一BFC中没有其他元素的时候

所以我们可以采用让容器元素伸展到能够包含红色正方形，而不是让他们超出块元素的底部。
p { overflow: hidden; height: auto; }

再举一个例子：

	.par {
				border: 5px solid #fcc;
				width: 300px;
				
			}
	.child {
			border: 5px solid #f66;
			width: 100px;
			height: 100px;
			float: left;
		}
		

			

			

此时par的宽和高是310和10，两个正方形的宽和高是110*110，效果为：

我们可以采用BFC解决这个问题，因为在计算BFC的高度时，浮动元素也会参与计算，

	.par {
				border: 5px solid #fcc;
				width: 300px;
				overflow: hidden;
			}
			.child {
				border: 5px solid #f66;
				width: 100px;
				height: 100px;
				float: left;
			}

可以触发par生成BFC，那么par在计算高度时，par内部的浮动元素child也会参与计算。
效果如下：

• 防止垂直margin重叠
  因为Box垂直方向的距离由margin决定。属于同一个BFC的两个相邻Box的margin会发生重叠,就像下面这样：

p{
   			color: red;
   			background:green ;
   			text-align: center;
   			margin: 100px;
   			width: 200px;
   			line-height: 100px;
   		}
   		

   	
haha
   	
heihei

为了防止margin重叠，我们可以使用BFC。我们在一个元素的外面包裹一层容器，使之形成一个BFC，这样两个P标签就属于不同的BFC了，此时就不会发生重叠，就像这样：

#wrap{
				overflow: hidden;
			}
p{
	color: red;
	background:green ;
	text-align: center;
	margin: 100px;
	width: 200px;
	line-height: 100px;
}


		
haha
		

			
heihei