css田字格布局

最新推荐文章于 2024-01-30 10:48:09 发布

Uyi婷

最新推荐文章于 2024-01-30 10:48:09 发布

阅读量1.4k

点赞数 1

这是在学习的时候突然忘了怎么写的，网上百度了一下，为了下次再忘记，我直接把文章复制过来

思考为什么四个方块是由上到下排列的，而不是蓝色在红色的右边，绿色在蓝色的右边，灰色在绿色的右边，上面说过了，因为它们是没有float属性的div，要独占一行。

接下来想让蓝色的快在红色的右边，那么需要给红色加上float:left属性，蓝色的块也加上float:left属性，代码是这样的：

复制代码

<!DOCTYPE html>
<html>
<head>
    <title></title>


<style type="text/css">
    #red{
        width: 200px;
        height: 200px;
        background: red;
        float:left;
    }
    #blue{
        width: 200px;
        height: 200px;
        background: blue;
        float:left;
    }
    #green{
        width: 200px;
        height: 200px;
        background: green;

    }
    #grey{
        width: 200px;
        height: 200px;
        background: grey;
    }



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

复制代码

效果如下图所示：

你可能会问为什么蓝色的块在红色的块的右边？因为红色的块有float：left属性，它飘到了上个平面，而且不再独占一行元素，而蓝色的块也有float：left属性，所以红色的块和蓝色的块都跑到了上面那个平面而且靠在了一起。你可能会问那绿色的那个块哪里去了呢?

因为红色的块和蓝色的块都跑到了上面那个平面去了，那么原来在下面那个平面的绿块就会顶到显示器的上边缘，而上面的平面会把下面的平面给盖住，所以绿色的块在红色块的下面。

那怎么让绿色的块不被覆盖掉呢？这时候clear:left的作用就体现出来了，我们给绿色的块加一个clear:left属性，代码是这样的：

复制代码

<!DOCTYPE html>
<html>
<head>
    <title></title>


<style type="text/css">
    #red{
        width: 200px;
        height: 200px;
        background: red;
        float:left;
    }
    #blue{
        width: 200px;
        height: 200px;
        background: blue;
        float:left;
    }
    #green{
        width: 200px;
        height: 200px;
        background: green;
        clear:left;
    }
    #grey{
        width: 200px;
        height: 200px;
        background: grey;
    }



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

复制代码

效果是这样的：

为什么绿色的块加了clear：left不是跑到蓝色块的右边呢？因为绿色块目前是一个没有float：left属性的块，它会独占一个元素，而如果放到了蓝色块的右边，显然于“我的上面不允许有float：left属性的块”相矛盾，别忘了，没有float：left属性的块不管它有几个像素，它都独占一个行。

那怎么让灰色的块跑到绿色块的右边呢？很简单，只要把绿色的块再加上float:left属性，同时灰色块也加上float：left属性即可，最后代码就是最开始的那个代码。效果如下：

https://www.cnblogs.com/yfish/p/6390218.html?utm_source=itdadao&utm_medium=referral

Uyi婷

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
css田字格布局

这是在学习的时候突然忘了怎么写的，网上百度了一下，为了下次再忘记，我直接把文章复制过来思考为什么四个方块是由上到下排列的，而不是蓝色在红色的右边，绿色在蓝色的右边，灰色在绿色的右边，上面说过了，因为它们是没有float属性的div，要独占一行。接下来想让蓝色的快在红色的右边，那么需要给红色加上float:left属性，蓝色的块也加上float:left属性，代码是这样的： ...
复制链接

扫一扫