css浮动属性，田字格布局效果

    float属性的做用就是改变块元素对象的默认显示方式，block对象设置了float属性以后它将再也不独自占据一行，脱离原有的图层，能够浮动到左侧或右侧，利用浮动属性来写一个田字格布局。首先咱们先创建四个div，分别设置一下id固然也能够用class。

 

div创建好后，咱们再设置一下div的尺寸和颜色。

 

 

如今尺寸和颜色都设置好了以后呢，咱们再来设置浮动效果，如下设置第一个div“one”是向左浮动：

 

你们是否是发现红色的div块没有了呢，是由于第一块蓝色的那块浮在了第二块红色的那块上面，红色的就被蓝色的给挡住了，那么咱们接下去再设置红色的向右浮动：

 

 

好，如今红色的div块是向右浮动了，如今你们又能够发现绿色的div块又不见了，同理是由于被蓝色的浮动块给挡住了，那么接下来咱们将绿色的和灰色的两块div块给设置浮动：

 

 

那么，如今呢，四块div块都设置好了，你们能够看到蓝色的和绿色的两块都是向左浮动的，红色的和灰色的都是向右浮动的，那么田字格是否是两行两列的呢，如今是一行四列的形式，那么咱们接下来将这四个div块变成两行两列：

 

 

你们注意看，在绿色div块我加了一个clear属性（clear 属性规定元素的哪一侧不容许其余浮动元素。）这样呢就实现了咱们两行两列的一个布局，可是咱们如今能够看到左边一列和右边一列距离比较远，那么咱们就要用偏移属性让左右两列的div靠拢：

 

 

好，如今能够看到咱们div的田字格布局就已经完成了，能够看到，我将四个色块设置了一个1px的距离。