CSS清除浮动

了解为什么要清除浮动我们先来看一个例子
我们想要的效果是这样的

son1和son2并排显示，不会影响底部蓝色的盒子，要实现这种效果我们先写出元素，如下

如果我们想son1和son2盒子并排显示，那么设置他们左浮动

.son1{
			width:100px;
			height:30px;
			background: orange;
			float: left;
		}
		.son2{
			width:100px;
			height:30px;
			background: red;
			float: left;
		}

结果并没有像我们想象的那样，son盒子虽然并排显示了，但蓝色的盒子本应在下面，现在确跑上来了，为什么会这样呢？

这是因为，当我们父元素没有设置高度的时候，子元素浮动会导致父元素高度为0的问题。

son盒子被一个父盒子装着，当父盒子高度为0时，蓝色的盒子自然就上去了？
怎么解决这种问题？
1.既然是因为父元素没有设置高度而引起的，那么设置父元素高度不就可以了吗，的确这也是一种解决办法。但我们实际在开发中一般不设置高度，因为我们不知道子元素有多少内容，不能把高度写死。
2.就是今天要讲的使用css清除浮动

清除浮动就是把浮动的盒子圈到里面，让父盒子闭合出口和入口，不让他们出来影响其他的元素。

在css clear属性用于清除浮动，其基本语法格式：

属性值	描述
left	不允许左侧有浮动元素（清除左侧浮动的影响）
right	不允许右侧有浮动元素
both	同时清除左右两侧浮动

清除浮动方法

1.额外标签法（不推荐）
是w3c推荐的做法，通过在浮动元素末尾添加一个空的标签如<div style='clear:both'></div>
优点：通俗易懂，方便书写
缺点：添加了无意义的标签，结构化较差

2.父元素添加overflow属性
添加overflow属性触发BFC方式，以实现清除浮动
给父元素添加overflow:hidden|auto|scroll
优点：代码简洁
缺点：内容增多时容易造成不会自动换行导致内容被隐藏掉

3.使用after伪元素清除浮动
这种方式跟额外标签法类似，好处是不用单独定义标签了

//定义一个清除浮动的类
.clearfix::after{content="" display:block;heihgt:0;clear:both;visibility:hidden}

优点：符合闭合思想
缺点：ie6,7不支持after需进行兼容处理
ie6,7使用

.clearfix{
    *zoom:1;
  }

4.使用before和after双伪元素清除浮动
优点：更符合闭合浮动思想，最完美的方式
缺点：兼容性 ie6,7使用zoom

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

.clearfix:after{
	clear:both
}
.cearfix{
	*zoom:1;
}