一个盒子不设置 height，当子元素都设置浮动后，无法撑起自身的高度。原因就是这个盒子没有形成 BFC。

.box {
	width: 400px; 
	border: 10px solid #000;
}
.box div {
	width: 200px;
	height: 200px;
	float: left;
}
.c1 {
	background-color: orange;
}
.c2 {
	background-color: blue;
}


	

	


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

BFC：Box Formatting Context，块级格式化上下文。是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面的元素，反之亦然。

创建 BFC 的方法：

1. 设置浮动，且 float 的值不为 none。
2. 设置定位，且 position 的值不为 static 或者 relative。
3. 设置 display 的值为 inline-block、flex 或者 inline-flex。
4. 设置 overflow 的值为 hidden。

BFC 的作用：

1. BFC 可以取消盒子竖直方向上 margin 的塌陷。
2. BFC 可以阻止元素被浮动元素覆盖。
3. BFC 可以撑起不设置 height，且内部盒子都浮动起来的盒子的高度，解决容器高度塌陷问题。

浏览器差异：

IE6、7 浏览器使用 haslayout 机制，和 BFC 规范略有差异。比如 IE 浏览器可以使用 zoom: 1 属性让盒子拥有布局 layout。