如果一个div有“clear：right”，没有什么应该浮动在它的右边，应该吗？ [英] If a div has "clear:right", nothing should float to the right of it, should it?

问题描述

我似乎对cssclear关键字的含义感到困惑。

I seem to have gotten confused as to what the css "clear" keyword means.

我有一些div元素，都有float：left 。第二个div元素也有clear：right。我认为会导致后续的元素去下一行。

I have a number of div elements, all with "float:left". The second last div element also has "clear:right". I thought that would cause the subsequent element to go to the next line. But for me, it doesn't.

这是我的例子：

<div class="Section">
    <div class="Thumbnail"></div>
    <div class="Number">0</div>
    <div class="Title">ShopTVC Wallace and Gromit WOA 6Apr11</div>
    <div class="Duration">00:00:32</div>
</div>​

看起来像这样：

我想让持续时间（00:00:32）出现在缩图（蓝色矩形）右侧的下一行。

I am trying to make the duration ("00:00:32"), appear on the next line, to the right of the thumbnail (the blue rectangle).

我知道我可以把最后三个div放到另一个容器div，但这个问题的目的是为了明确：权利不停止从标题右边浮动的时间。

I know that I could put the last three divs into another container div, but the purpose of this question is to understand why "clear:right" doesn't stop the duration from floating on the right of the title.

这里是CSS：

div.Section
{
    overflow:auto;
    background:cornsilk;
    border:2px solid navy;
    padding:12px;
}

div.Section div.Thumbnail
{
    width:64px;
    height:42px;
    background:SteelBlue;
    foreground:Navy;
}

div.Number
{
    width:16px;
    margin-left:6px;
}

div.Duration
{
    margin-left:22px;
}

div.Section div
{
    float:left;
}

div.Section div.Title
{
    color:DarkGreen;
    clear:right;
}

当然，jsfiddle链接： http://jsfiddle.net/8J7V6/3/

And, of course, the jsfiddle link: http://jsfiddle.net/8J7V6/3/

推荐答案

clear 属性不会阻止元素放置在被清除的元素之后的空间中。它防止元素放置在已经有元素漂浮到它之前的那个方向上。添加 clear：left 到 div.Duration 将使它放置在海军框下面。在持续时间之前添加< br /> 可能会解决您的问题，或者，如您在问题中所说，您可以为最后三个div使用另一个容器div 。

The clear property doesn't prevent elements from being placed in that space after the cleared element. It prevents the element from being placed where there are already elements floated to the that direction before it. Adding a clear:left to div.Duration would make it be placed below the navy box. Adding a <br/> before the duration might solve your problem, or, as you already said in your question, you could use another container div for the last three divs.

这篇关于如果一个div有“clear：right”，没有什么应该浮动在它的右边，应该吗？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！