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

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

 

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

 

 

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

 

大家是不是发现红色的div块没有了呢，是因为第一块蓝色的那块浮在了第二块红色的那块上面，红色的就被蓝色的给挡住了，那么我们接下去再设置红色的向右浮动：

 

 

好，现在红色的div块是向右浮动了，现在大家又可以发现绿色的div块又不见了，同理是因为被蓝色的浮动块给挡住了，那么接下来我们将绿色的和灰色的两块div块给设置浮动：

 

 

那么，现在呢，四块div块都设置好了，大家可以看到蓝色的和绿色的两块都是向左浮动的，红色的和灰色的都是向右浮动的，那么田字格是不是两行两列的呢，现在是一行四列的形式，那么我们接下来将这四个div块变成两行两列：

 

 

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

 

 

好，现在可以看到我们div的田字格布局就已经完成了，可以看到，我将四个色块设置了一个1px的距离。

 

转载于:https://blog.51cto.com/716870410/1556840