8

我似乎对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/

4

5 回答 5

12

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

于 2012-04-11T04:28:52.667 回答
5

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;
}

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

于 2014-01-23T15:37:14.043 回答
1

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

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

于 2012-04-11T04:24:14.047 回答
1

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

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

您是否尝试过在标题后使用简单<br />的？

于 2012-04-11T04:24:58.460 回答
0

.Duration { clear: left; }应该管用

于 2012-04-11T04:28:04.540 回答