一、概念認知
網頁佈局的核心，就是用CSS來擺放盒子位置。
如何把盒子擺放到合適的位置？
一般不外乎標準流、浮動、定位
二、標準流
標準流實際上就是一個網頁內標籤元素正常從上到下，從左到右排列順序,比如塊級元素會獨佔一行，行內元素會按順序依次前後排列,大部分頁面遵循該佈局。
三、浮動
| 1. 基礎概念 |
浮動最早是用來控制圖片，以便達到其他元素（特別是文字）實現“環繞”圖片的效果。後來用浮動特性來進行頁面佈局
| 2. 什麼是浮動？ |
元素的浮動是指設置了浮動屬性的元素會脫離標準普通流的控制，移動到其父元素中對應位置的過程。
浮動的目的:讓多個塊級元素能夠在同一行上顯示
在CSS中，通過float屬性來定義浮動，其語法格式是:
| 3. 浮動特性 |
特性1：浮動的元素總是找離它最近的父級元素對齊；但是不會超出內邊距的範圍。
特性2：浮動的元素排列位置，跟上一個塊級元素有關
如果上一個元素是標準流，則該浮動元素的頂部會和上一個元素的底部對齊
如果上一個元素有浮動，則該浮動元素頂部會和上一個元素的頂部對齊
特性3：一個父盒子裏面的子盒子如果需要一行對齊，只要其中一個子級有浮動，那麼其它子級都需要浮動，這樣才能一行對齊顯示。
| 5. 清除浮動 |
清除浮動主要爲了解決父級元素因爲子級浮動引起內部高度爲0 的問題；只要把浮動的盒子圈到裏面，讓父盒子閉合出口和入口不讓它們出來影響其他元素。
清除浮動終極解決方法:
.clearfix:before, .clearfix:after {
content:"";
display:table;
}
.clearfix:after {
clear:both;
}
.clearfix {
*zoom:1;
}
| 4. 總結 |
① 浮動會脫離標準流，不會佔位置，但會影響標準流;
② 浮動的目的就是爲了讓多個塊級元素能夠在同一行上顯示;
③ 元素添加浮動後，元素會具有行內塊級標籤的特性。元素的寬高完全取決於定義的寬高或者默認的內容多少。
語義化記憶口訣:
浮：加了浮動的元素盒子是浮起來的，漂浮在其他的標準流盒子上面。
漏：加了浮動的盒子，不佔位置的，它浮起來了，它原來的位置漏 給了標準流的盒子。
特：特別注意，首先浮動的盒子需要和標準流的父級搭配使用， 其次特別要注意注意浮動可以使元素顯示模式體現爲行內塊級標籤特性。
喜歡的關注下公衆號哦,每天都有新的博文推送哦
