如果一个div有"清楚:正确",那么它应该浮动到它的右边,不是吗？

Question

我似乎对css"clear"关键字的含义感到困惑.

我有一些div元素,都是"float:left".第二个最后一个div元素也有"clear:right".我认为这将导致后续元素转到下一行.但对我来说,事实并非如此.

这是我的例子:

<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")显示在下一行,缩略图的右侧(蓝色矩形).

我知道我可以把最后三个div放到另一个容器div中,但这个问题的目的是要理解为什么"clear:right"不会阻止持续时间浮动在标题的右边.

这是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/

Answer 1

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

Answer 2

ahruss的答案是正确的,但我也注意到没有人真正回答你的问题.基本上clear:left是指左浮动元素.clear:right指右浮动元素.

由于您的元素向左浮动,而不是正确,clear:right因此不会影响它.

你可以做的另一件事是将两个文本元素包装在一个单独的div中,从蓝色框中浮动,浮动那个容器div和蓝色div,然后当你浮动两个文本元素时,你的clear:left代码会将日期置于文本下面在你的容器div内,而不是在蓝色图像下面.

像这样:

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

并将此添加到您的CSS:

div.TextContainer {
   float:left;
}

添加您需要的任何其他视觉样式.