文章目錄
- 浮動
- 傳統網頁布局的三種方式
- 标準(普通流，文檔流)
- 為什麼需要浮動
- 什麼是浮動
- 浮動特性
- 浮動元素經常和标準流父級搭配使用
- 常見網頁布局
- 布局示例
- 浮動布局注意點
- 清除浮動
- 為什麼要清除浮動
- 清除浮動本質
- 具體方法
浮動
傳統網頁布局的三種方式
網頁布局的本質——用 CSS 來擺放盒子。 把盒子擺放到相應位置.
CSS 提供了三種傳統布局方式(簡單說,就是盒子如何進行排列順序)：
- 普通流（标準流）
- 浮動
- 定位
标準(普通流，文檔流)
所謂的标準流: 就是标簽按照規定好預設方式排列.
例如：
-
塊級元素會獨占一行，從上向下順序排列。
常用元素：div、hr、p、h1~h6、ul、ol、dl、form、table
-
行内元素會按照順序，從左到右順序排列，碰到父元素邊緣則自動換行。
常用元素：span、a、i、em 等
以上都是标準流布局，标準流是最基本的布局方式。
這三種布局方式都是用來擺放盒子的，盒子擺放到合适位置，布局自然就完成了。
注意：實際開發中，一個頁面基本都包含了這三種布局方式（後面移動端學習新的布局方式） 。
為什麼需要浮動
之是以需要浮動，是因為有一些布局要求我們通過普通流很難去實作！
例如：
1.如何讓多個塊級盒子(div)水準排列成一行？
你可能會說轉為行内塊元素，但是如此的話中間會有縫隙，操作起來相當的麻煩，很難控制。
2.如何實作兩個盒子的左右對齊？
這種用标準流去實作也很麻煩。
總結： 有很多的布局效果，标準流沒有辦法完成，此時就可以利用浮動完成布局。 因為浮動可以改變元素标簽預設的排列方式.
浮動最典型的應用：
可以讓多個塊級元素一行内排列顯示
。
網頁布局第一準則：多個塊級元素縱向排列找标準流，多個塊級元素橫向排列找浮動。
什麼是浮動
float
屬性用于建立浮動框，将其移動到一邊，直到左邊緣或右邊緣觸及包含塊或另一個浮動框的邊緣。
文法：
選擇器 { float: 屬性值; } 浮動特性
加了浮動之後的元素,會具有很多特性，其中有幾個要重點掌握。
- 浮動元素會脫離标準流(脫标)
- 浮動的元素會一行内顯示并且元素頂部對齊
- 浮動的元素會具有行内塊元素的特性.
①那麼什麼是脫标呢？
設定了浮動（float）的元素最重要特性：
- 脫離标準普通流的控制（
浮
- 浮動的盒子不再保留原先的位置
相當于錯開了，不在一個層次上面。② 如果多個盒子都設定了浮動，則它們會按照屬性值一行内顯示并且頂端對齊排列。
注意： 浮動的元素是互相貼靠在一起的（不會有縫隙），如果父級寬度裝不下這些浮動的盒子， 多出的盒子會另起一行對齊。
③浮動元素會具有行内塊元素特性
任何元素都可以浮動。不管原先是什麼模式的元素，添加浮動之後具有行内塊元素相似的特性。
- 如果塊級盒子沒有設定寬度，預設寬度和父級一樣寬，但是添加浮動後，它的大小根據内容來決定(行内塊元素的特性)
- 浮動的盒子中間是沒有縫隙的，是緊挨着一起的
- 行内元素同理
浮動元素經常和标準流父級搭配使用
為了限制浮動元素位置, 我們網頁布局一般采取的政策是:
先用标準流的父元素排列上下位置, 之後内部子元素采取浮動排列左右位置.符合網頁布局第一準側.
常見網頁布局
布局示例
浮動布局注意點
①浮動和标準流的父盒子搭配
先用标準流的父元素排列上下位置, 之後内部子元素采取浮動排列左右位置
②一個元素浮動了，理論上其餘的兄弟元素也要浮動
一個盒子裡面有多個子盒子，如果其中一個盒子浮動了，那麼其他兄弟也應該浮動，以防止引起問題。
浮動的盒子隻會影響浮動盒子後面的标準流,不會影響前面的标準流.
因為前面說過：float 屬性用于建立浮動框，将其移動到一邊，直到左邊緣或右邊緣觸及包含塊或另一個浮動框的邊緣。
清除浮動
為什麼要清除浮動
我們可以思考一下：
我們前面浮動元素有一個标準流的父元素, 他們有一個共同的特點,都是有高度的.但是, 所有的父盒子都必須有高度嗎?
我們可以設想一種情況：我們要給一個父盒子裡面裝很多很多的子盒子，那麼這個長度是不好測量的，不容易一開始就去設定好這個盒子的高度。
那麼我們就可以想象一種理想的情況：讓子盒子撐開父親. 有多少孩子,我父盒子就有多高.
但是這樣就會引來諸多的問題：
子盒子浮動不占有位置，最後造成父級盒子高度為 0 ，就會影響下面的标準流盒子！
清除浮動本質
- 清除浮動的本質是清除浮動元素造成的影響
- 如果父盒子本身有高度，則不需要清除浮動
- 清除浮動之後，父級就會根據浮動的子盒子自動檢測高度。父級有了高度，就不會影響下面的标準流了
具體方法
- 額外标簽法也稱為隔牆法，是 W3C 推薦的做法。
- 父級添加 overflow 屬性
- 父級添加after僞元素
- 父級添加雙僞元素
清除浮動的政策是: 閉合浮動.
① 額外标簽法
文法：
選擇器{clear:屬性值;} 我們實際工作中， 幾乎隻用 clear: both;
額外标簽法會在浮動元素末尾添加一個空的标簽。例如 <div style=”clear:both”></div>，或者其他标簽（如<br />等）。
- 優點：通俗易懂，書寫友善
- 缺點：添加許多無意義的标簽，結構化較差
注意： 要求這個新的空标簽必須是塊級元素。
②父級添加 overflow 屬性
可以給父級添加 overflow 屬性，将其屬性值設定為 hidden、 auto 或 scroll 。
- 優點：代碼簡潔
- 缺點：無法顯示溢出的部分
③父級添加after僞元素
:after 方式是額外标簽法的更新版。也是給父元素添加
.clearfix:after {
content: "";
display: block;
height: 0;
clear: both;
visibility: hidden;
}
.clearfix { /* IE6、7 專有 */
*zoom: 1;
} - 優點：沒有增加标簽，結構更簡單
- 缺點：照顧低版本浏覽器
- 代表網站： 百度、淘寶網、網易等
.clearfix:before,.clearfix:after {
content:"";
display:table;
}
.clearfix:after {
clear:both;
}
.clearfix {
*zoom:1;
} - 優點：代碼更簡潔
- 缺點：照顧低版本浏覽器
- 代表網站：小米、騰訊等