一 標準文檔流
說白了，就是一個“默認”狀態（由上往下），標準流中，標簽分為兩種：塊級元素，行內元素
標準流的現象
- 空白折疊現象
- 高矮不齊，底邊對齊
- 自動換行，一行寫滿，自動換行
-
margin 塌陷（只在標準流中才會有）
41A27C36-E4DA-4E10-8C03-067D5F1EB92F.png
1.1 塊級元素，行內元素
塊級元素：一定是霸占一行的，能設置寬高，不設置寬高默認占滿父親；div,p,h
行內元素：和其他元素并排，不能設置寬高，默認寬高就是文字的高度。span ,a,b,i,u
3DDDEC3F-135C-44ED-92CE-98EBE483E57A.png
（1）區分塊級與行內
- 文本級：p，span，b,a,i,u,em
- 容器級：div，h，li，dd，dt，
在CSS中所有的文本級的標簽，都是行內元素
所有的容器級的標簽都是塊級元素
(2) 塊級與行內相互轉換
-
display：block；轉變塊級
例子：將a標簽專成塊級，變成塊級后可以設置寬高，獨自占一行
4D055B4D-161E-4F89-B554-457E4B933E81.png -
display: inline; 轉變為行內
例子：將div轉為行內標簽
0B84FA8E-84AC-4885-93B1-DF169EA2F4BA.png
標準流做不出網頁，因為能并排不能改變寬高，所以要脫離標流，
只有脫離標注流才能達到下面的布局
A464C34C-90F9-4D4D-A7AC-4EBE52D79916.png
1. 浮動
float：left
BD62D81A-69A7-4A4F-BD16-2AB94F4C5DAF.png
脫離標注流現象
實現兩個塊級元素div顯示在同一行，同時還能設置寬高，浮動之后脫離了標準流現象
5C25D3F7-4C41-4FC4-992F-D2786DF3063C.png
綠色的的盒子設置 float：left，藍色不設置脫離了標準流，序號為2的盒子在標準流中酒變成了第一個
7F79BDA2-91F9-460B-84B0-30D9ABE53264.png
注意:一旦一個盒子脫離了標準流之后，就能設置寬高了，無論是塊級元素還是行內元素，也就是是說行內元素在不轉換成塊級的情況下也能設置寬高
浮動元素互相貼靠現象
123，都設置為浮動后，縮小窗口可以看到布局會發生變化
F22C4898-59FB-4726-9A67-C6D12D87EA1B.png
浮動的字圍現象
浮動能擋住盒子但是擋不住文字
例如：一個浮動div和一個p標簽，p標簽的盒子會插入到div的下面，但是p標簽里面文字不會被擋住
EC1075B2-7C3E-4824-95D9-8F21877D4F1F.png
2. 浮動清除
如果一個元素要浮動，那么它的祖先的元素一定要有高度
有高度的盒子才能關住浮動
例如：
現在有兩個div ，div里面有兩個ul（不是浮動），li都是浮動的
4BDB6EC9-AC5E-4BD2-9CB0-EEDC2C005480.png
841D6DD0-3198-4AA6-A1C5-1E581F0C1AB0.png
本以為這兩個li會分兩排的但是：
0B47AFFD-310E-4A92-AE19-F41A200370C9.png
原因： div沒有高度，不能給自己浮動的孩子一個容器，撐不起這個高，
所以： 如果一個元素要浮動，那么它的祖先的元素一定要有高度
有高度的盒子才能關住浮動
解決方法：清除浮動
1.手動設置高度
2. 最簡單的清除浮動的方法，就是給盒子增加Clear：both；表示自己的內部元素，不受盒子的影響，
82610B2F-7D06-42B6-BA7B-44D03C3019A7.png
但是兩個盒子間的marg失效
3.外墻法 ：在兩部分浮動元素中間，建一個墻。隔開兩部分浮動，讓后面的浮動元素不去追前面的浮動元素，用自己的身體當作了間隙
8482A926-AE74-415B-802A-01395CCF9E0F.png
能清除兒子浮動的影響，但是第一個div還是不會有
4.內墻法
一個父親如果不能被自己浮動的兒子撐出高度，在里面修一堵墻，就能被撐出高度
C551E216-CAB6-42E1-A3FA-1E4870A5AA2A.png
這種方法，div就能被自己里面浮動p撐出高度
5.設置overflow：hide；本意是清除溢出到盒子外面的文字，但是前端工程師發現了他的偏方
一個父親如果不能被自己浮動的兒子撐出高度，但是，只要父親這只了這個屬性那么父親就能被撐出高度，（父親會自動適配內容的高度）
699652B2-AE50-46BC-A925-15EA81689C9A.png
- 絕對
- 固定位置
