BFC与清除浮动

BFC 的特性

1. 内部的 Box 会在垂直方向上一个接一个的放置。

2. 垂直方向上的距离由 margin 决定

3. bfc 的区域不会与 float 的元素区域重叠。

4. 计算 bfc 的高度时，浮动元素也参与计算

5. bfc 就是页面上的一个独立容器，容器里面的子元素不会影响外面素。

如何清除浮动？

不清除浮动会发生高度塌陷：

浮动元素父元素高度自适应（父元素不写高度时，子元素写了浮动后，父元素会发生高度塌陷）

1. clear清除浮动（添加空div法）在浮动元素下方添加空div,并给该元素写css样式： {clear:both;height:0;overflow:hidden;}

2. 给浮动元素父级设置高度

3. 父级同时浮动（需要给父级同级元素添加浮动）

4. 父级设置成inline-block，其margin: 0 auto居中方式失效

5. 给父级添加overflow:hidden 清除浮动方法

6. 万能清除法 after伪类 清浮动（现在主流方法，推荐使用）

.float_div:after{
	content:".";	
	clear:both;	
	display:block;	
	height:0;	
	overflow:hidden;	
	visibility:hidden;	
	}
	
.float_div{
	zoom:1
	
}