我们把网页的常用的布局格式分为以下三种：
1.标准流。
所谓的标准流就是，行内元素自己单独一行，而块级元素是上下显示的。 以前我们学习的都是标准流。 注意：标准流使我们网页布局中最稳定的一种结构
2. 浮动流
使我们学习的脱离标准流的第一种方式。会影响我们标准流的排列。所以，我们布局的时候，能用标准流做的，就不用浮动做。
3. 定位流
定位流也是脱离标准流的一种模式。它完全脱离标准流，不会对标准流有影响。
浮动(float)
我们要浮动的目的： 我们浮动的目的，就是可以把多个块级元素放到想要的一行上。浮动 Float： left right none 你不得不必须知道详细的理解浮动： 1. 浮动已经脱离的标准流。 （脱标） 也就是说，浮动已经漂浮在标准流的上方。 2. 因为我们的浮动是左右浮动，所以我们的块级元素都是左右排列。
清除浮动（clear）
如果想要我们做的网页浏览器兼容性好，首先要保证的是，我们写的代码要足够标准。 清除浮动的原因： 因为浮动会影响标准流。所以我要根据不同情况来清除浮动。 Clear:both;
1.1.1额外标签法
W3c推荐，再最后一个浮动的盒子的后面，新添加一个标签。然后他可以清除浮动。 
优点： 通俗好理解 缺点： 增加了太多的标签
1.1.2Overflow 清除浮动
使用方法： 是浮动的大盒子（父级标签）再样式里面加: overflow:hidden;为了照顾ie6，我们再加上 zoom:1;
优点： 代码书写方便 缺点： 如果这个父盒子，里面还有定位，就会引起麻烦。
1.1.3 After伪类清除浮动
- 声明清除浮动：
.clearfix:after{ content:""; display:block; visibility:hidden; clear:both; height:0; } .clearfix{ /* 为了照顾ie6浏览器*/ zoom:1; }
- 调用
<div class="box clearfix">
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>overflow清除浮动</title> <style type="text/css">.clearfix:after{ content:""; display:block; visibility:hidden; clear:both; height:0; } .clearfix{ /* 为了照顾ie6浏览器*/ zoom:1; }.box{width:400px;} .one,.two{width:200px; height:100px; background-color:#093; float:left;} .two{background-color:#39F;} .test{width:400px; height:120px; background-color:#900;} </style> </head> <body><div class="box clearfix"><div class="one"></div> <div class="two"></div> </div> <div class="test"></div> </body> </html>
优点： 一次写完，后面直接调用就可以了 缺点： 声明麻烦写
1.1.4After before伪类清除浮动
- 声明清除
.clearfix:before,.clearfix:after{ content:""; display:table; } .clearfix:after{ clear:both; } .clearfix{ /*照顾ie6*/ zoom:1; } 使用：<div class="box clearfix">
第四种，是大部分大型网站常用的，比如新浪 淘宝 的清除浮动的效果。
以上希望对大家有所帮助。
和大家一起分享。