HTML里如何用css控制div画田子格布局？

写字板

浏览器

【规划思路】田字格布局，要求大小相同的四个正方形。而html里div如果不加控制的话是独占一行的，现在要做的是把四个大小相同的方块，排列成“田”字，如下图所示构思。

第一步、新建html文档并搭建框架新建一个TXT文档，重命名为“田子格布局.html”，然后用记事本打开，输入表头信息，已经html整体框架搭建。包括head与body。如下图所示。

第二步、DIV布局分别复制4个不同的div作为4部分，并且分别命名为不同id；显示内容为块1、块2、块3、块4。【提示】div在html里是单独占一列的（如果不控制），现在4个div布局完成。【代码如下】

第四步、使用浮动在CSS里控制输入float：left；四个div全部输入一样内容，这时候看到的是四个并排的div，而没有达到想要的效果，如下图所示。【代码如下】

第五步、清除浮动在第三块上使用清除浮动clear：left；其余的代码保持不变，然后保存代码，刷新打开的页面，就会看到一个田字格了，如下图所示。【代码如下】#prat3{ width: 200px; height: 200px; background: yellow; float: left; clear: left;【注意】只清除第三块的就可以了。

【完整的代码】