浮动属性的规则，以及清除浮动

规则一

元素一旦浮动后，脱离标准流，朝着向左或向右移动，直到自己的边界紧贴着包含块（一般父元素）或者其他浮动元素的边界为止。

规则二

浮动元素不能与行内级内容层叠，行内级内容会将被浮动元素推出

比如行内级元素，inline-block元素、会计元素内容

定位元素会层叠在浮动元素上面

规则三

行内级元素、inline-block元素浮动后，其顶部将与所在行的顶部对齐

规则四

若果元素向左（向右）浮动，浮动元素的左（右）边界不能超出包含块的左（右）边界

规则五

浮动元素之间不能层叠

如果一个元素浮动，另一个浮动元素已经在那个位置了，后浮动的元素紧贴着前一个浮动元素（左浮找左浮，右浮找右浮）

如果水平方向剩余的空间不够明显浮动元素，浮动元素将向下移动，浮动元素将向下移动，直到有充足的空间为止

规则六

浮动元素的顶端不能超过包含块的顶端，也不能超过之前所有浮动圆的顶端

清除浮动-clear

left：要求元素的顶部低于之前生成的所有左浮动元素的底部

right：要求元素的顶部低于之前生成的所有右浮动元素的底部

both：要求元素的顶部低于之前生成的所有浮动元素的底部

清除浮动常见方法

给父元素设置固定高度（不推荐）

在父元素最后增加一个空的块级元素，并且让它设置clear：both，会增加无意义的标签，维护麻烦，违反了结构与样式分离的原则

（推荐使用） 给父元素增加::after伪元素，纯css样式解决，结构与样式分离

.clear-fix::after{
	content:"";
	display:block;
	clear:both;
	height:0;  //兼容旧浏览器
	visibility:hidden; //兼容旧浏览器
}
.clear-fix{
	*zoom:1; //兼容IE6~7浏览器
}

.clearfix:after,
clearfix:before{/*伪元素是行内元素 正常浏览器清除浮动方法*/
    content: "";
    display: block;
    height: 0;
    line-heigth:0;
    visibility: hidden;
    clear:both;}