1、先设置4个div，占位置。每个div设置id选择器。<html><head></head><body><div id="red"></div><div id="blue"></div><div id="green"></div><div id="grey"></div></body></html>
2、设置每个div宽度、高度、背景色：代码：#red{ width: 200px; height: 200px; background: red; } #blue{ width: 200px; height: 200px; background: blue; } #green{ width: 200px; height: 200px; background: green; } #grey{ width: 200px; height: 200px; background: grey; }
3、加上css标签：在<head>与</head>加：<style type="text/css"></style>,这对标记把四个id选择器设置包起来。整理好，我们看下效果如：
4、用浮动的知识把这些div飘起来，用float:left;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; float:left;} #grey{ width: 200px; height: 200px; background: grey; float:left; }看效果如下：
5、我们要把第三个div下移，第四个div也是，我们就修改下，把它清除浮动，用clear:left,修改后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; float:left;clear:left;} #grey{ width: 200px; height: 200px; background: grey; float:left; }
6、修改好保存，效果下：
7、设置好了。
