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>

看起来像这样：

enter image description here

我正在尝试将持续时间（“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;
}

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

Answer 3

我使用了填充和边距。如果在您的情况下无法使用，则以下解决方案将不合适。

http://jsfiddle.net/8J7V6/5/

Answer 4

右边没有任何东西浮动。您遇到的问题是您之前已经发送了所有内容，然后您告诉时间浮动到左侧。 它仍悬浮在左侧，它只是叠加在已经存在左侧的内容之上。

但是，是的，向右清除使得该元素在所有向前浮动的元素之后分解。 Clear不会影响其后的元素。

您是否尝试过using a simple <br /> after your title？

Answer 5

.Duration { clear: left; }应该有效

如果一个div有“清楚：正确”，那么它应该浮动到它的右边，不是吗？

5 个答案: