摘要：至于說，，，屬性是脫離文檔流的，這個估計也是我們剛開始用得最多的，最方便的一個，同時也會給我們帶來許多問題，這一次你會發現與前面的，有相同的地方，都是覆蓋，不同的是，里文字被擠出來，這也是之前主要是用來做文字環繞效果有關。

一般在html有塊級元素和行級元素，主要的塊級元素有

div，p，h1-h6,ul,ol,li,dl,dt,dd,table,tr,th,td,有好記的辦法，div，p，顯示標題的，列表，表格，定義列表相關的

行內元素，也稱行級元素，主要有a,span,em,i,strong,input,img,label,select,textarea等
一般塊級元素會獨占一行，而行內元素不會，行內元素會擠在一行，直到一行排滿，針對行內元素和會級元素，主要在后面布局用到的是，可以將一些行內元素的display屬性變成block，display:block;,也可以使用dispaly:inline-block屬性，

在這里順便提一下block,inline-block,inline,的區別。對設置了display:block;的標簽，你可以設置width，height，margin，padding，這些都會起作用，而對于display:inline;的標簽，你在css里設置的width，height，margin-top，margin-bottom，padding-top，padding-bottom是沒有用的（margin-left，margin-right,padding-left,padding-right是有效的）,這里有一個疑問？？padding的所有屬性都在起作用，margin的top和bottom確實不起作用，代碼是這樣的：

   
son

常用的與定位相關的有float，static，relative，absolute,fixed，記得剛開始學習的時候一直搞不清楚relative和absolute，之前一直在濫用float，現在情況少一些，static是默認的，一個一個說吧。

relative，當把position設定為position：relative時，我們一般還會用到left，top，right，bottom這幾個屬性，還是用上邊那個列子。這里父級div相對于自己原來的位置向左，向下移動10px，坐標軸以左上角為原點，向右為x軸，向下為y軸，你還可以設置left，top的值為負值，relative是相對于自身而言，不會脫離文檔流，一般要定位先要將父級設置為relative。

   
son

absolute，首先你得找一個父級作為參照，并將父級設置為relative，假如不這樣設定的話，都是以body作參照，下面還是舉個列子。可以看到，sibling跑到前面去了，說明position：absolute；是脫離文檔流的，與float有點類似，這里你可能會有疑問，為什么sibling的有些部分會被覆蓋，這是因為son設置為position：absolute，（他的z-index有默認屬性吧?。﹤€人猜測，要想將sibling放到son上面，你可以給sibling設置也為position：absolute，z-index:[number],number比son的大即可。

  
   
   
       
       
       
   
   
       

       
son
       
sibling
 
       
   
   

3.fixed,以瀏覽器窗口為參照，固定位置不動，具體自己可以動手操作試試。
4.至于說float，float：left，float：right，float屬性是脫離文檔流的，這個估計也是我們剛開始用得最多的，最方便的一個，同時也會給我們帶來許多問題，

    

    
son
    
sibling
 
    


    

這一次你會發現與前面的position：absolute，有相同的地方，都是.son覆蓋sibling，不同的是，float里文字被擠出來，這也是之前主要是用來做文字環繞效果有關。關于定位的內容還有很多，這里不一一細說。

初學階段，我們一定會遇到清除浮動的問題，這是在寫頁面里一定會碰到的問題，關于清除浮動的問題，網上也是一搜一大把，下面我自己先歸納一下吧！還是先來一個列子。

    

    
son1
    
son2
 
    

首先我們會碰到，不能將父元素進行撐開，怎樣才能解決呢？有好幾種解決方法。下面我列舉幾種常見的解決辦法。

方法一：使用空標簽

    

    
son1
    
son2
 
    

    

優點：簡單，代碼少，瀏覽器兼容性好。缺點：需要添加大量無語義的html元素，代碼不夠優雅，后期不容易維護。

方法二：使用CSS的overflow屬性，這個的原理主要是運用BFC（塊級格式化上下文），今天剛看到，BFC（浮動、絕對定位元素（position 為 absolute 或 fixed）、行內塊元素 display:inline-block、表格單元格 display:table-cell、表格標題 display:table-caption 以及 overflow 屬性值不為 visible 的元素（除了該值被傳播到視點 viewport 的情況）將創建一個新的塊級格式化上下文。）我們對父元素使用overflow：hidden;也可以達到效果。效果和之前的一模一樣。

方法三：可能是使用的最廣，最高大上的一種方法，使用：after偽類，實現原理應該就是在clearfix后面的偽類添加內容， 設置了clear：both樣式。為了IE6-7兼容性，還要添加一條樣式，來觸發haslayout（）事件，寫法：

.clearfix:after {clear: both; content: ".";height:0; visibility: hidden; display: block;}
.clearfix {  zoom: 1; /*觸發 haslayout*/ }

這三種方法基本能幫我們解決這一類問題，其中第三種用得最廣泛。

1.水平居中： 在父元素添加樣式，要注意的是要給父元素一個寬度 {margin:0 auto;}
2.垂直居中： 這有一個比較詳細的博客詳解垂直居中，專業講解各種居中
3.水平和垂直居中，不定寬高和定寬高兩種方式，寬高固定這一種比較簡單，直接上代碼

①：{width: 200px; height: 200px; position: absolute; top:50%; left: 50%; margin-top:-100px;/*-height/2*/ margin-left:-100px;/*-width/2*/ }
②：{ position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%);}
③：{display: flex; justify-content: center; align-items: center; border: 2px solid #f22;}

暫時就總結這一些。。。