普通流（normal flow）
-
說明
前面我們提過，網頁佈局的核心，就是用CSS來擺放盒子位置。如何把盒子擺放到合適的位置？
CSS的定位機制有3種：普通流（標準流）、浮動和定位。
普通流又稱爲“文檔流”，或者“標準流”，實際上就是一個網頁內標籤元素正常從上到下，從左到右排列順序的意思，比如塊級元素會獨佔一行，行內元素會按順序依次前後排列；按照這種默認的排列方式，不會出現例外的情況的佈局叫做普通流佈局。
普通流（標準流）：類似列車在既定軌道上形式（在地面上）
浮動：好比飛機脫離地面，浮動在空中，但也按照一定的航線飛行。
定位：好比宇宙飛船，相對於地球擺放
浮動
-
說明
元素會脫離標準文檔流的控制，移動到其父元素中指定位置的過程。浮動的目的：就是爲了讓多個塊級元素同一行上顯示。
-
語法
div{float:left/right/none}特性
-
浮動只有左右浮動。
-
浮動元素脫離標準流，不佔位置，會影響標準流。（標準流在下面，浮動元素漂在標準流的上面）
![浮動屬性]()
-
浮動首先創建包含浮動元素的父盒子。因爲，浮動的元素總是找距離自己最近的父級元素對齊，但是不會超出父元素的邊框和內邊距。
![浮動屬性]()
<title>浮動</title> <style> #div1 { width: 100px; height: 70px; background-color: hotpink; float: left; border: 1px solid red; } #div2,#div3,#div4 { width: 100px; height: 70px; background-color: hotpink; float: left; border: 1px solid yellow; } </style> <div class="father"> <div class="child"></div> </div> -
父盒子裏的所有子盒子都設置浮動，才能顯示在一行上。也就是說，若其中一個子級有浮動，則其他子級都需要浮動。
![浮動屬性]()
<style> #div1 { width: 100px; height: 100px; background-color: hotpink; float: left; border: 1px solid red; } #div2,#div3,#div4 { width: 100px; height: 100px; background-color: hotpink; float: left; border: 1px solid yellow; } </style> <div class="wrap"> <div id="div1">div1</div> <div id="div2">div2</div> <div id="div3">div3</div> <div id="div4">div4</div> </div> -
元素添加浮動後，會具有行內塊元素的特性。元素的大小完全取決於定義的大小或者默認的內容多少。浮動根據元素書寫的位置來顯示相應的浮動。
![浮動屬性]()
<style> div { height: 200px; background-color: pink; float: left; /* 塊級元素添加浮動後，會具有行內塊元素的特性 */ } span { background-color: hotpink; float: left; /* 行內元素添加浮動後，會具有行內塊元素的特性 ，可設置高度*/ height: 100px; } </style> <div id="div1">div1</div> <div id="div2"div2</div> <span>行內元素</span> <span>行內元素</span> -
總結
float 浮 漏 特
浮： 加了浮動的元素盒子是浮起來的，漂浮在其他的標準流盒子上面。 漏： 加了浮動的盒子，不佔位置的，它浮起來了，它原來的位置漏 給了標準流的盒子。 特： 特別注意，首先浮動的盒子需要和標準流的父級搭配使用， 其次 特別的注意浮動可以使元素顯示模式體現爲行內塊特性。
-
浮動的影響
-
浮動的影響
對附近的元素佈局造成改變，使得佈局混亂
因爲浮動元素脫離了普通流，會出現父級元素高度坍塌的現象：原來的父容器高度是內部元素撐開的，但是當內部元素浮動後，脫離普通流浮動起來，那父容器的高度就坍塌，變爲高度0px。
正常標準流：
父容器被子容器高度撐開。
子容器浮動後：
子容器浮動，脫標，父容器沒有了高度，就不會被撐開。
當然，我們可以通過給父容器指定高度來解決塌陷問題。但是，很多情況下我們不方便給父容器指定高度，比如新聞，你不知道新聞裏有多少字。一般情況下，我們是讓下面的內容自動撐開父容器，而不是寫死高度。
清除浮動方法
-
說明
清除浮動本質是閉合浮動，把浮動的元素圈到裏面，讓父容器閉合，不讓妖怪（浮動元素）出來興風作浪。
-
語法
div{clear:屬性值;}屬性值 描述 left 清除左側浮動帶來的影響 right 清除右側浮動帶來的影響 both 同時清除左右兩側浮動帶來的影響
方法1：額外標籤法
-
說明
W3C推薦的做法，通過在浮動元素末尾添加一個空的標籤或則其他標籤br等亦可。如
<div style="clear:both"></div>。 -
原理
添加一個空div，利用CSS提供的clear:both清除浮動，讓父級div能自動獲取到高度。
-
優點
通俗易懂，書寫方便。瀏覽器支持好，不容易出現怪問題。
-
缺點
添加許多無意義的標籤，結構化較差。 我只能說，w3c你推薦的這種方法，你不值得擁有。。。
方法2：父級添加overflow清除浮動
-
說明
“子不教父之過”，在父容器上做處理。通過觸發BFC的方式，實現清除浮動效果。（BFC後面講解）
-
語法
.father{ overflow: hidden|auto|scroll; /*三個取值都可以實現。*/ } -
原理
使用overflow:hidden時，瀏覽器會自動檢查浮動區域的高度。
-
優點
代碼簡潔，瀏覽器支持好。
-
缺點
內容增多時候容易造成不會自動換行導致內容被隱藏掉，無法顯示需要溢出的元素。（必須定義width或zoom:1，不能和position配合使用，因爲超出的尺寸的會被隱藏。）
-
建議
只推薦沒有使用position或對overflow:hidden理解的小夥伴兒使用。
方法3：父級添加僞類清除浮動
-
說明
:after 方式爲空元素的升級版，好處是不用單獨加標籤了。
-
使用
.clearfix:after { content: "."; display: block; height: 0; clear: both; visibility: hidden; } .clearfix {*zoom: 1;} /* IE6、7 專有 */ -
注意
content:"." 裏面加一個小點，或者其他符號，儘量不要爲空，否則再firefox 7.0前的版本會有生成空格。
-
建議
推薦使用，建議定義公共類，以減少CSS代碼。
![浮動屬性]()
-
缺點
由於IE6-7不支持:after，需要使用 zoom:1觸發hasLayout，才能讓主流瀏覽器都支持。
-
優點
符合閉合浮動思想，更具有結構語義化，大型網站都有使用如：騰迅，網易，新浪等等。
方法4：父級添加雙僞元素清除浮動
-
說明
爲了更加符合浮動的閉合思想，爲父級添加before和after雙僞元素來清除浮動。
-
使用
.clearfix:before,.clearfix:after { content:""; display:table; /* 這句話可以觸發BFC BFC可以清除浮動 */ } .clearfix:after { clear:both; } .clearfix { *zoom:1; } -
缺點
由於IE6-7不支持:after，使用 zoom:1觸發hasLayout。
-
優點
代碼更簡潔，代表網站： 小米、騰訊等。