奇怪的div浮动行为

时间:2013-07-23 13:37:01

标签: css-float html

请解释为什么带有“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;
}

我认为应该在第3个div之后使用类class1(在此示例中为空的右侧空格)。不清楚是否应该清除父容器中的浮动内容而不是整个文档中的浮动内容?

1 个答案:

答案 0 :(得分:0)

clear:both让它向下滑动。 你想要它在哪里?