浮动
浮动：即脱离正常的文档流，优先级提高。
例如三个div盒子设置宽高都为100px;表现为：竖着排一列。那么如果设置浮动以后，就会显示到一排，也就是横着显示一排；如果只给第一个设置浮动，那么第二个盒子就会认为我上面没有盒子了，并且有位置，那么第二个盒子就会跑到第一个盒子的位置。并且被第一个盒子覆盖，因为第一个盒子设置了浮动，他的文档流是比较高的。
如下图：
没有任何浮动的三个盒子： 正常排列
浮动以后的盒子： 横着排列成一排
给第一个盒子设置浮动的情况：
此时为了方便看出盒子一盖住盒子2，我给盒子2的宽设置成了150px，其他的盒子还是100px.
清除浮动
为什么要清除浮动：
没有给父盒子设置高度。（为了方便添加子元素且不会脱离父盒子）子盒子设置了浮动影响到了下面的布局
清除浮动的方式：
给浮动的元素最后面添加一个空的块级元素，然后给他的样式设置clear:both; （优点：简单；缺点：给结构中实际添加了新的元素，结构化较差）。父级元素设置overflow:hidden; （优点：最简单。缺点：溢出父级元素的部分也就看不到了）父级设置：after伪元素；
给父级设置after伪元素的情况： // 优点：语义化ok，缺点兼容性不好，IE6，IE7都不能用；
.clearfix:after{
content:"";
display:block;
height:0;
clear:both;
visbility:hidden;
}
.clearfix{
*zoom:1;
}
给父级元素前后都设置伪元素，前面设置：before{} 后面设置：after{}
.clearfix：before,.clearfix:after{
content:"";
display:table;
}
.clearfix:after{
clear:both;
}
.clearfix{
*zoom:1;
}
总结：浮动是为了让结构更好的布局，达到我们想要的样子。清除浮动是为了不影响下面的布局，建议最好用第四种。