html初学者最开始的要接触的就是div布局与css控制，今天大鹏教大家在html里使用CSS控制div完成一个“田子格”的布局。
工具/原料
写字板
浏览器
方法/步骤
1、【规划思路】田字格布局，要求大小相同的四个正方形。而html里div如果不加控制的话是独占一行的，现在要做的是把四个大小相同的方块，排列成“田”字，如下图所示构思。
2、第一步、新建html文档并搭建框架新建一个TXT文档，重命名为“田子格布局.html”，然后用记事本打开，输入表头信息，已经html整体框架搭建。包括head与body。如下图所示。
3、第二步、DIV布局分别复制4个不同的div作为4部分，并且分别命名为不同id；显示内容为块块块块4。【提示】div在html里是单独占一列的（如果不控制），现在4个div布局完成。【代码如下】</head><body> <divid="prat1">块1</div> <divid="prat2">块2</div> <divid="prat3">块3</div> <divid="prat4">块4</div> </body></html>
4、第三步、CSS控制4个DIV显示输入style然后开始对4个div进行控制，分别对四个块进酚祯馄嫱行大小和颜色的设定，处理之后在浏览器中打开显示如下图所示。【提示】由于是田子格，所以四个div大蟛杆戛攉小应该相同，为了可以区分颜色分别采用不同的颜色。【代码如下】<style> #prat1{ width:200px; height:200px; background:blue;/*边长200像素的蓝色方块*/ } #prat2{ width:200px; height:200px; background:red;/*边长200像素的蓝色方块*/ } #prat3{ width:200px; height:200px; background:yellow;/*边长200像素的蓝色方块*/ } #prat4{ width:200px; height:200px; background:green;/*边长200像素的蓝色方块*/ }</style>
5、第四步、使用浮动在CSS里控制输入float：left；四个div全部输入一样内容，这时候看到的是四个并排的div，而没有达到想要的效果，如下图所示。【代码如下】<style> #prat1{ width:200px; height:200px; background:blue; float:left; } #prat2{ width:200px; height:200px; background:red; float:left; } #prat3{ width:200px; height:200px; background:yellow; float:left; } #prat4{ width:200px; height:200px; background:green; float:left; }</style>
6、第五步、清除浮动在第三块上使用清除浮动clear：left；其余的代码保持不变，然后保存代码，刷新打开的页面，就会看到一个田字格了，如下图所示。【代码如下】#prat3{ width:200px; height:200px; background:yellow; float:left; clear:left;【注意】只清除第三块的就可以了。
7、【完整的代码】<!DOCTY绯摺驼予PEHTMLPUBLIC"-//W3C//DTDHTML4.01Transitional//EN"稆糨孝汶;"http://www.w3.org/TR/html4/loose.dtd"><html><head><metahttp-equiv="Content-Type"content="text/html;charset=UTF-8"><title>田字格布局</title><style>#prat1{width:200px;height:200px;background:blue;float:left;}#prat2{width:200px;height:200px;background:red;float:left;}#prat3{width:200px;height:200px;background:yellow;float:left;clear:left;}#prat4{width:200px;height:200px;background:green;float:left;}</style></head><body><divid="prat1">块1</div><divid="prat2">块2</div><divid="prat3">块3</div><divid="prat4">块4</div></body></html>