一、display總結

inline

1.同行顯示，詳單與純文字，當一行顯示不下，如果就是一個字顯示不下，那麼顯示不下的哪一個字就會自動換行，和純文字的區別就是有標籤整體的概念，標籤與標籤間有一個空格的隔斷。

2.支援部分css樣式，不支援寬高|行高（行高會對映到父級block標籤）| margin上下

3.centent由文字內容撐開

4.inline標籤只巢狀inline標籤

inline-block

1.同行顯示，當一行顯示不下，標籤作為一個整體換行顯示。

2.支援所有css樣式

3.content預設由文字（圖片）內容撐開，也可以自定義寬高，當自定義寬高後，一定採用自定義寬高（顯示區域不足，內容會在標籤內容換行顯示，可能超出顯示區域）

4.inline-block標籤不建議巢狀標籤。

block

1.異行顯示，不管自身區域多大，都會獨佔一行。

2.支援所有css樣式。

3.width預設繼承父級，height由內容（文字，圖片，子標籤）撐開，當設定自定義寬高後，一定採用自定義寬高。

4.block可以巢狀任意標籤。

二.overflow知識

本質

　　overflow:處理內容超出盒子顯示區域

　　overflow:auto | scroll | hidden

　　auto:自適應，內容超出，滾動顯示超出部分，不超出則正常顯示。

　　scroll:一直擦愛用滾動方式顯示

三、浮動佈局

　　float:浮動佈局，改變BFC的參照方位

　　為什麼要使用：使用它，塊級盒子機會同行顯示

　　float: left | right；  左 | 右 浮動

　　left:BFC參照方向從左向右

　　right:BFC參照方向從右向左

　　浮動的區域有父級的width決定

四、清浮動

　　浮動問題：子級浮動了，不再撐開父級的高度，那麼父級如果擁有兄弟  標籤，可能就

會出現佈局重疊的問題

　　清浮動：解決上面的問題，通過使父級獲取一個合適的高度，這樣子級就不會和父級的

兄弟佈局發生重疊 

　　clear:left | right | both

　　1.設定父級的死高度

　　2.通過兄弟設定 clear:both

　　3.設定父級overflow屬性

　　.sup{

　　　　overflow:hidden;

　　}

　　4.通過父級：after偽類

　　.sup:after{

　　　　content:"";

　　　　display:block;

　　　　cler:both;

　　}