css田字格布局
这是在学习的时候突然忘了怎么写的，网上百度了一下，为了下次再忘记，我直接把文章复制过来
思考为什么四个方块是由上到下排列的，而不是蓝色在红色的右边，绿色在蓝色的右边，灰色在绿色的右边，上面说过了，因为它们是没有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