BFC和清除浮动

我对BFC的理解

对css有了解的朋友肯定知道盒式模型这个概念，对一个元素设置css，首先需要知道这个元素是block还是inline类型。而BFC就是用来格式化快级盒子。

BFC:块级格式化上下文，它是指一个独立的块级渲染区域，只有Block-level Box 参与，该区域拥有一套渲染规则来约束块级盒子的布局，且与区域外部无关

 

BFC的生成

既然上文提到BFC是一块渲染区域，那这块渲染区域到底在哪，它又是有多大。这些由生成BFC的元素决定，css2.1中规定满足下列css声明之一的元素便会生成BFC

 

• float的值不为none；
• overflow的值不为visible
• dispalay的值为inline-block，table-cell，tabl
• e-caption
• position的值为absolute或fixe
• 有人认为table也可以生成BFC其实这里的主要原因是table会默认生成一个匿名的table-cell，正是这个匿名的table-cell生成了BFC

 

BFC的约束规则

生成BFC元素的子元素会一个接一个的放置。垂直方向上他们的起点是一个包含块的顶部，两个相邻子元素之间垂直距离取决于元素的margin特性。在BFC中相邻的块级元素外边距会折叠。

生成BFC元素的子元素，每一个子元素的外边距和包含块的左边界相接触，（对于从右到左的格式化，右外边距和右边界相接触），除非这个子元素也创建了一个新的BFC（如它自身也是一个浮动元素）。

清除浮动

1.浮动也跟着浮动

2.浮动用overflow来包裹起来

3.在后面添加一个空的div，为其设置样式 clear：both

4.比较通用的办法，添加clearfix

.clearfix:after{
	content: ".";
	width: 0;
	height: 0;
	visibility: hidden;
	display: block;
	clear: both;
	overflow: hidden;
}

5.改进一下clearfix样式，可以防止margin的叠加

 

.clearfix:before,
.clearfix.after{
	content: "";
	display: table;
}
.clearfix:after{
	clear: both;
}