8
css提供了三種傳統布局方式：
- 普通流（標準流）
- 浮動
- 定位
網頁布局準則：多個塊級元素縱向排列找標準流，多個塊級元素橫向排列找浮動；定位則是讓盒子自由地在某個盒子內移動位置或者固定屏幕中的某個位置，并且可以壓住其他盒子。
1. 標準流（普通流/文檔流）
所謂標準流，就是標簽按照規定好默認方式排列
- 塊級元素會獨占一行，從上向下順序排列
- 【常見塊元素：div、hr、p、h1~h6、ul、ol、dl、form、table】
- 行內元素會按照順序，從左到右順序排列，碰到父元素邊緣則自動換行
- 【常見行內元素：span、a、i、em等】
2. 浮動
為什么需要浮動：可以讓多個塊級元素在一行內排列顯示
什么是浮動：
float屬性用于創建浮動框，將其移動到一邊，直到左邊緣或右邊緣觸及包含快或另一個浮動框的邊緣【所謂浮動指的就是使元素脫離原來的文本流，在父元素中浮動起來。】
語法：選擇器{ float : 屬性值; }
屬性值：
- none：元素不浮動（默認值）
- left：元素向左浮動
- right：元素向右浮動
特點：
（1）浮動元素會脫離標準流（脫標）
脫離標準普通流的控制，移動到指定位置，俗稱脫標
浮動的盒子不在保留原來的位置
（2）浮動的元素會一行內顯示并且元素頂部對齊
如果多個盒子都設置了浮動，則它們會按照屬性值一行內顯示并且頂端對齊排列
注意：浮動的元素是互相貼靠在一起的（不會有縫隙），如果父級寬度裝不下這些浮動的盒子，多出的盒子會另起一行對齊
（3）浮動的元素會具有行內塊元素的特性
任何元素都可以浮動，不管原先是什么模式的元素，添加浮動之后具有行內塊元素相似的特性
所以為了約束浮動元素位置，網頁布局一般采取的策略是：
先用標準流的父元素排列上下位置，之后內部子元素采取浮動排列左右位置，符合網頁第一準則
浮動只會影響浮動盒子后面的標準流，不會影響前面的標準流
清除浮動：
場景：父盒子的高度不一定都要設置，比如新聞文章的網頁，就不易寫死網頁盒子的高度，應該自適應高度，此時就要用到清除浮動了。
由于父盒子在很多情況下，不方便給高度，但是子盒子浮動又不占有位置，最后父級盒子高度為0時，就會影響下面的標準流盒子。
理想狀態：讓子盒子撐開父盒子，有多少孩子，父盒子就有多高
浮動清除的本質：
- 清除浮動的本質就是清除浮動元素造成的影響
- 如果父盒子本身有高度，則不需要清除浮動
- 清除浮動之后，父級就會根據浮動的子盒子自動檢測高度。父級有了高度，就不會影響下面的標準流了
語法：選擇器 { clear : 屬性值; }
屬性值：
- left：不允許左側有浮動元素（清除左側浮動的影響）
- right：不允許右側有浮動元素（清除右側浮動的影響）
- both：同時清除左右兩側浮動的影響【常用】
清除浮動的方法：
（1）額外標簽法，也稱隔墻法，是W3C推薦的做法，但不推薦，雖然這樣通俗易懂，書寫方便，但是會添加許多無意義的標簽，結構化較差
【在浮動元素末尾添加一個空的標簽，例如<div style="clear:both"></div>或者其他標簽，注意：這個方法要求這個新的空標簽必須是塊級元素，行內元素是不起作用的】
（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<{p> content: "";
display: table;
}
.clearfix:after{
clear: both;
}
.clearfix<{p> *zoom: 1;
}
代碼簡單，但需要照顧低版本瀏覽器
代表網站：小米、騰訊等
3. 定位
定位概念：將盒子定在某一個位置，所以定位也是在擺放盒子，按照定位的方式移動盒子
定位 = 定位模式 + 邊偏移
定位模式決定元素的定位方式，它通過CSS的position屬性來設置，其值可以分為四個：
- position：靜態定位
- relative：相對定位
- absolute：絕對定位
- fixed：固定定位
邊偏移
邊偏移就是定位的盒子移動到最終位置，有top、bottom、left和right四個屬性
（1）靜態定位：static
靜態定位是元素的默認定位，就是元素沒有開啟定位的意思
語法：選擇器{ position: static; }
特點：
靜態定位按照標準流特性擺放位置，它沒有邊偏移
靜態定位在布局時很少用到
（2）相對定位：relative
相對定位是元素在移動位置的時候，是相對于它原來的位置來說的
語法：選擇器{ position: relative; }
特點：
- 它是相對于自己原來的位置來移動的（移動位置的時候參照點是自己原來的位置）
- 原來的標準流的位置繼續占有，后面的盒子仍然以標準流的方式對待他（不脫標，繼續保留原來位置）
1.開啟元素的相對定位后，如果不設置偏移量元素不會發生任何變化
2.相對定位元素相對于其自身在文檔流中的位置來定位
3.相對定位的元素不會脫離文檔流，元素在文本流中的位置不會改變。
4.相對定位不會改變元素的性質，塊元素還是塊元素，內聯元素還是內聯元素
5.相對定位會使元素的層級提升，使元素可以覆蓋文本流中的元素。
（3）絕對定位：absolute
絕對定位是元素在移動位置的時候，是相對于它祖先元素來說的
語法：選擇器{ position: absolute; }
絕對定位指使元素相對于html元素或離他最近的祖先定位元素進行定位。
• 當將position屬性設置為absolute時，則開啟了元素的絕對定位。
• 當開啟了絕對定位以后，可以使用top、right、bottom、left四個屬性對元素進行定位。
特點：
1.元素設置絕對定位以后，如果不設置偏移量，元素的位置不會發生變化
2.絕對定位的元素是相對于距離他最近的開啟了定位的祖先元素進行定位，如果所有的祖先元素都沒開啟定位，則相對于瀏覽器窗口body進行定位。
3.絕對定位的元素會完全脫離文檔流
4.絕對定位會改變元素的性質。內聯變塊，塊的高度和寬度都被內容撐開，并且不獨占一行
5.絕對定位會使元素提升一個層級
口訣：子絕父相
意思就是子級是絕對定位，父級使用相對定位。
總結：因為父級需要占有位置，因此是相對定位；子盒子不需要占有位置，因此是絕對定位
（4）固定定位：fixed
固定定位是元素固定于瀏覽器可視區的位置，主要使用場景：可以在瀏覽器頁面滾動時，元素的位置不會改變
語法：選擇器{ position: fixed; }
特點：
- 以瀏覽器的可視窗口為參照點移動元素
- 跟父元素沒有任何關系
- 不隨滾動條滾動
- 固定定位不在占有原先的位置
- 固定定位也是脫標的，其實固定定位也可以看作是一種特殊的絕對定位
（5）粘性定位：sticky
粘性定位可以被認為是相對定位和固定定位的混合，Sticky粘性的
語法：選擇器{ position: sticky; top 10px; }
特點：
- 以瀏覽器的可視窗口為參照點移動元素（固定定位特點）
- 粘性定位占有原先的位置（相對定位特點）
- 必須添加top、left、right、bottom其中一個才有效
定位的總結：
定位的疊放次序：z-index
在使用定位布局時，可能會出現盒子重疊的情況。此時，可以使用z-index來控制盒子的前后次序（z軸）
語法：選擇器{ z-index: 1; }
特點：
- 數值可以是正整數，負整數或0，默認是auto，數值越大，盒子越靠上
- 如果屬性值相同，則按照書寫順序，后來居上
- 數字后面不能加單位
- 只有定位的盒子才有z-index屬性
2. 定位擴展
（1）絕對定位的盒子居中
說明：加了絕對定位的盒子不能通過margin:0 auto水平居中，但是可以通過以下計算方法實現水平和垂直居中
方法：
①left:50%; 讓盒子的左側移動到父級元素的水平中心位置
②margin-left:-100px; 讓盒子向左移動自身寬度的一半
（2）定位的特殊特性
絕對定位和固定定位也和浮動類似
- 行內元素添加絕對或者固定定位，可以直接設置高度和寬度
- 塊級元素添加絕對或者國定定位，如果不給寬度或者高度，默認大小就是內容的大小
- 脫標的盒子不會觸發外邊距塌陷
- 絕對定位會完全壓住盒子，而浮動元素只會壓住它下面標準流的盒子，不會壓住下面標準流盒子里面的文字/圖片。但是絕對定位會壓住下面標準流里的所有內容
