<style>
.div1{
width: 100px;
height: 100px;
background-color: blue;
float: left;/*第一个div漂浮起来了，第二个div顶替了第一个位置*/
}
.div2{
width: 200px;
height: 100px;
background-color: red;
float: left;
}
.div3{
width: 100px;
height: 200px;
background-color: yellow;
float: left;
}
.div4{
width: 200px;
height: 200px;
background-color: green;
float: left;/*4个一起飘就从左向右横排排着飘 ，使得4个div在同一行*/
}
</style>
</head>
<body>
<!--div.div*4 tab加回车快速输入4个div-->
<div class="div1"></div>
<div class="div2" style="clear: left"></div>/*style="clear: left"清除左边的浮动，相当于换行*/
<div class="div3" style="clear: right"></div>
<div class="div4" ></div>
</body>
