css浮動屬性，田字格佈局效果

    float屬性的做用就是改變塊元素對象的默認顯示方式，block對象設置了float屬性以後它將再也不獨自佔據一行，脫離原有的圖層，能夠浮動到左側或右側，利用浮動屬性來寫一個田字格佈局。首先咱們先創建四個div，分別設置一下id固然也能夠用class。

 

div創建好後，咱們再設置一下div的尺寸和顏色。

 

 

如今尺寸和顏色都設置好了以後呢，咱們再來設置浮動效果，如下設置第一個div「one」是向左浮動：

 

你們是否是發現紅色的div塊沒有了呢，是由於第一塊藍色的那塊浮在了第二塊紅色的那塊上面，紅色的就被藍色的給擋住了，那麼咱們接下去再設置紅色的向右浮動：

 

 

好，如今紅色的div塊是向右浮動了，如今你們又能夠發現綠色的div塊又不見了，同理是由於被藍色的浮動塊給擋住了，那麼接下來咱們將綠色的和灰色的兩塊div塊給設置浮動：

 

 

那麼，如今呢，四塊div塊都設置好了，你們能夠看到藍色的和綠色的兩塊都是向左浮動的，紅色的和灰色的都是向右浮動的，那麼田字格是否是兩行兩列的呢，如今是一行四列的形式，那麼咱們接下來將這四個div塊變成兩行兩列：

 

 

你們注意看，在綠色div塊我加了一個clear屬性（clear 屬性規定元素的哪一側不容許其餘浮動元素。）這樣呢就實現了咱們兩行兩列的一個佈局，可是咱們如今能夠看到左邊一列和右邊一列距離比較遠，那麼咱們就要用偏移屬性讓左右兩列的div靠攏：

 

 

好，如今能夠看到咱們div的田字格佈局就已經完成了，能夠看到，我將四個色塊設置了一個1px的距離。