CSS - 两个 div 彼此重叠，而不是两个单独的 div

Question

为什么内容 3 和内容 4 不是两个单独的 div？我怎样才能只用 css 修复它？我希望第一个红色低于绿色，第二个红色低于第一个红色。

JSFIDDLE - http://jsfiddle.net/LsgsE/

HTML

<div class="left">TODO write content1</div>
<div class="left">TODO write content2</div>
<div >TODO write content3</div>
<div>TODO write content4</div>

CSS

div {
width: 200px;
height: 200px;
background-color: red;
}
div:after {
clear: both;
display: block;
content: "";
height: 0px;
}
div.left {
float: left;
background-color: green;
}

Answer 1

试试这个:

div {
width: 200px;
height: 200px;
background-color: red;
clear: both;
}

div.left {
float: left;
background-color: green; 
clear: none;
}