我們把網頁的常用的布局格式分為以下三種：
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">
第四種，是大部分大型網站常用的，比如新浪 淘寶 的清除浮動的效果。
以上希望對大家有所幫助。