小蚁上树四个方块是由上到下排列的，本次需要运用float属性和清除浮动特性。因为div是块元素需要独占一行，上面红黄两个色块添加浮动；如果没有给绿色块添加浮动，此时会上移被红块所覆盖；绿色块需要存在红色块下方，所以要清除浮动，后面在给绿蓝添加 float：left；就能看到效果。
<!DOCTYPE html>
<html>
<meta charset="utf-8">
<head>
<title></title>
<style type="text/css">
#red{
width: 200px;
height: 200px;
background: red;
float:left;
}
#yellow{
width: 200px;
height: 200px;
background: yellow;
float:left;
}
#green{
width: 200px;
height: 200px;
background: green;
clear:left;/*清楚浮动，不然绿块会上移被红块覆盖住*/
float:left;
}
#blue{
width: 200px;
height: 200px;
background: blue;
float:left;
}
</style>
</head>
<body>
<div id="red"></div>
<div id="yellow"></div>
<div id="green"></div>
<div id="blue"></div>
</body>
</html>
效果图：
演示效果传送门：JSbin
回顾下清除浮动的几种方式：
1、父级div定义height
2、在结尾处添加空div（<br>标签clear:both
3、父级div定义伪类：after和zoom
4、父级div定义overflow:hidden
5、父级div定义overflow:auto
详情传送门：https://www.cnblogs.com/nxl0908/p/7245460.html
