一.margin的塌陷解決：

BFC （block format context）塊級格式化上下文格式

display:inline-block

float:left / right

overflow: hidden

position: absolute

二.float

1.浮動元素產生了浮動流

2.所有產生了浮動流的元素，塊級元素看不到他們，產生了BFC的元素和文字類屬性（inline）的元素以及文字都能看到浮動元素,有點類似於疊層

3.清除浮動流

1.div{clear:both}

2.偽元素輔助（三件套解決浮動問題）

.wrapper::after{

　　content:'';

　　clear:both;（只有塊級元素才能設定clear）

　　display:block;

}

。。。

<span>無聊</span>

偽元素（天生就存在，行級元素，可以當元素來操作，但是沒有元素結構）：span::before ,    span::after{content:''}

如果想設定寬高，必須設定成Inline-block。

。。。

3.BFC幫助

position:absolute; float:left / right;打內部把元素轉換成inline - block;意思就是你的內容有多少，邊框就有多大，會緊緊侷限

三.文字溢位處理（三件套）

white-space: nowrap  (沒有換行)

overflow:hidden （超出DIV就隱藏）

overtext:ellipsis（超出文字變成小圓）

四.載入問題

圖片寬高

<div>淘寶網</div>

div{

　　display: inline - block;

　　background-image:url(#);

　　background-size:200px 80px;

　　width:200px;

　　height:80px}

要在圖片沒加載出來的時候，即刪了CSS也能顯示出東西

兩個解決辦法：

1.white-space: nowrap

overflow:hidden

text - indent :200px (文字縮排)

2.height:0px

overflow:hidden

padding-top:80px(通過padding-top來撐開)

五.行級元素只能巢狀行級元素

塊級元素能巢狀任何元素

但是<p><div></div></p>是不可以的，p標籤裡不能套塊級元素

還有<a><a></a></a>是不可以的，a標籤裡不能套a標籤

六.解決圖片間隔（因為inline和inline-block都是文字類屬性，中間有文字分隔符）

1.margin-left:-6px，壓縮後會重疊部分

2.但是上面的方法不太好，最好就是把<img><img>之間的空格去掉，然後顯示的文字分隔符就會消失。

！調對齊方式，vertical-align