念念不忘
必有回响

CSS实现田字格布局

四个方块是由上到下排列的,本次需要运用float属性和清除浮动特性。因为div是块元素需要独占一行,上面红黄两个色块添加浮动;如果没有给绿色块添加浮动,此时会上移被红块所覆盖;绿色块需要存在红色块下方,所以要清除浮动,后面在给绿蓝添加 float:left;就能看到效果。

<!DOCTYPE html>
<html>
<meta charset="utf-8">
<head>
    <title></title>
<style type="text/css">
    #red{
        width: 200px;
        height: 200px;
        background: red;
        float:left; 
    }
    #yellow{
        width: 200px;
      height: 200px;
        background: yellow;
        float:left;
  }
    #green{
        width: 200px;
        height: 200px;
        background: green;
        clear:left;/*清楚浮动,不然绿块会上移被红块覆盖住*/
        float:left;

    }
    #blue{
        width: 200px;
        height: 200px;
        background: blue;
        float:left;
  
    }



</style>
</head>
<body>
<div id="red"></div>
<div id="yellow"></div>
<div id="green"></div>
<div id="blue"></div>
</body>
</html>

效果图:

演示效果传送门:JSbin

回顾下清除浮动的几种方式:

1、父级div定义height

2、在结尾处添加空div(<br>标签clear:both

3、父级div定义伪类:after和zoom

4、父级div定义overflow:hidden

5、父级div定义overflow:auto

详情传送门:https://www.cnblogs.com/nxl0908/p/7245460.html

赞(0) 打赏
未经允许不得转载:小蚁上树 » CSS实现田字格布局
分享到: 更多 (0)

评论 抢沙发

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址