一、浮動

1、傳統網頁布局

網頁布局的本質：用 CSS 來擺放盒子，把盒子擺放到相應位置。

CSS 提供了三種傳統布局方式（盒子如何進行排列順序）

1. 普通流（標準流）
2. 浮動
3. 定位

實際開發中，一個頁面基本都包含了這三種布局方式（后面移動端學習新的布局方式） 。

2、標準流

標準流：就是標簽按照規定好默認方式排列，標準流是最基本的布局方式。

1. 塊級元素會獨占一行，從上向下順序排列
2. 行內元素會按照順序，從左到右順序排列，碰到父元素邊緣則自動換行

3、浮動的用途

有很多的布局效果，標準流沒有辦法完成，此時就可以利用浮動完成布局。 因為浮動可以改變元素標簽默認的排列方式。

浮動最典型的應用：可以讓多個塊級元素一行內排列顯示。

網頁布局第一準則：多個塊級元素縱向排列找標準流，多個塊級元素橫向排列找浮動。

4、浮動的概述

float 屬性用于創建浮動框，將其移動到一邊，直到左邊緣或右邊緣觸及包含塊或另一個浮動框的邊緣

選擇器 { float: 屬性值; }

屬性值	描述
none	元素不浮動（默認值）
left	元素向左浮動
right	元素向右浮動

5、浮動特性

1）浮動元素會脫離標準流（脫標）：浮動的盒子不再保留原先的位置

2）浮動的元素會一行內顯示并且元素頂部對齊

浮動的元素是互相貼靠在一起的（不會有縫隙），如果父級寬度裝不下這些浮動的盒子，多出的盒子會另起一行對齊。

3）浮動的元素會具有行內塊元素的特性

任何元素都可以浮動。不管原先是什么模式的元素，添加浮動之后具有行內塊元素相似的特性。

• 如果塊級盒子沒有設置寬度，默認寬度和父級一樣寬，但是添加浮動后，它的大小根據內容來決定。
• 浮動的盒子中間是沒有縫隙的，是緊挨著一起的。

6、浮動元素經常和標準流父級搭配使用

先用標準流的父元素排列上下位置，之后內部子元素采取浮動排列左右位置。

先設置盒子的大小，之后設置盒子的位置。

7、浮動布局注意點

1）浮動和標準流的父盒子搭配。

先用標準流的父元素排列上下位置，之后內部子元素采取浮動排列左右位置。

2）一個元素浮動了，理論上其余的兄弟元素也要浮動。

一個盒子里面有多個子盒子，如果其中一個盒子浮動了，那么其他兄弟也應該浮動，以防止引起問題。

浮動的盒子只會影響浮動盒子后面的標準流，不會影響前面的標準流。

二、清除浮動

1、 為什么需要清除浮動？

由于父級盒子很多情況下，不方便給高度，但是子盒子浮動又不占有位置，最后父級盒子高度為 0 時，就會影響下面的標準流盒子。

1. 父級沒高度
2. 子盒子浮動了。
3. 影響下面布局了，我們就應該清除浮動了

由于浮動元素不再占用原文檔流的位置，所以它會對后面的元素排版產生影響

2、清除浮動本質

清除浮動的本質是清除浮動元素造成的影響

如果父盒子本身有高度，則不需要清除浮動

清除浮動之后，父級就會根據浮動的子盒子自動檢測高度。父級有了高度，就不會影響下面的標準流了。

3、清除浮動

清除浮動的策略是閉合浮動。

選擇器 {clear: both;
}

1）額外標簽法

額外標簽法也稱為隔墻法，是 W3C 推薦的做法。

額外標簽法會在浮動元素末尾添加一個空的標簽。例如 <div style="clear:both"></div>，或者其他標簽（如<br />等）。

• 優點： 通俗易懂，書寫方便
• 缺點： 添加許多無意義的標簽，結構化較差
• 注意： 要求這個新的空標簽必須是塊級元素

2）父級添加 overflow

可以給父元素添加 overflow 屬性，將其屬性值設置為 hidden、 auto 或 scroll 。

• 優點：代碼簡潔
• 缺點：無法顯示溢出的部分

3）:after 偽元素法

:after 方式是額外標簽法的升級版。也是給父元素添加

.clearfix:after { content: ""; display: block; height: 0; clear: both; visibility: hidden; 
} 
.clearfix { /* IE6、7 專有 */ *zoom: 1;
}

• 優點：沒有增加標簽，結構更簡單
• 缺點：照顧低版本瀏覽器

4）雙偽元素清除浮動

給父元素添加

.clearfix:before,.clearfix:after {content:"";display:table; 
}
.clearfix:after {clear:both; 
}
.clearfix {*zoom:1;
}

• 優點：代碼更簡潔
• 缺點：照顧低版本瀏覽器