css-float - 奇怪的 div 浮动行为

Question

请解释为什么带有“asd”内容的div低于红色div？

http://jsfiddle.net/krEqQ/7/

HTML：

<div class="class0">0</div>
<div style="padding-left: 150px;">
<div class="class1">1<br>1</div>
<div class="class1">2<br>2</div>
<div class="class1">3</div>    
<div style="clear:both;"></div>
<div>asd</div>
</div>

CSS：

.class0 {
    display: block;
    width: 150px;
    float: left;
    background: red;
    height: 300px;
}

.class1 {
    display: block;
    width: 150px;
    float: left;
    margin: 0 50px 50px 0;
}

我认为它应该出现在 class1 的第三个 div 之后（在这个例子中为空的右侧空间）。不清楚两者都应该清除父容器中的浮动内容而不是整个文档吗？

Answer 1

clear:both让它滑下来。你想去哪里呢？