Question

很长一段时间以来，我一直在使用一个名为clear的CSS类，它只有clear: both规则。我以下面的方式使用它（以Django语法显示，但它并不重要）：

{% for item in collection %}
  <ul class="horiz"><!-- horizontal list -->
    <li>{{ item }}</li>
    <li>{{ item }}</li>
  </ul>
  <div class="clear"></div>
{% endfor %}

正如你所看到的，我正在做一堆水平列表，使它看起来就像一张桌子。想象一下，CSS规则.horiz li暗示float: left。请注意，我在此“表格”中的每一行之后使用<div class="clear"></div>，很多HTML都是如此简单。

这真的是要走的路吗？我有没有想过更简单的东西？

Answer 1

有可能在CSS中做到这一点

http://www.positioniseverything.net/easyclearing.html

    #pages ul li {
        display: block;
        float: left;
        .......
    }


    #pages ul:after {
        content: ".";
        display: block;
        height: 0;
        clear: both;
        visibility: hidden;
    }

Answer 2

你有没有理由不能使用......

<ul class="horiz clear">

...除了第一个以外的每个列表？

Answer 3

如果您希望每个列表都显示其中的内容，而无需添加填充DIV标记，则可以使用以下内容调整列表的overflow属性：

.horiz
{
   overflow:hidden;
}

现在，即使列表项本身是浮动的，列表的内容也应该显示，而不会像现在一样折叠区域，因为它们已经移出流程。

Answer 4

您可以将ul与overflow: hidden;放在一起。这会为每个ul建立一个新的block formatting context，这正是您想要的。

我曾经和你一样clear: both;，但是一旦我发现了这个奇怪的小怪癖，我几乎完全开始使用它了。它似乎在语义上更优越，并且在99％的情况下都有效。

Answer 5

为什么不给你的UL和你的LI固定宽度，其中UL的宽度至少是LI宽度的两倍，但是小于LI宽度的3倍。

然后你可以将你所有的LI放在一个UL中并在LI上加float: left。

这将导致每个列表项彼此相邻，但当它们用完房间时（由于UL的宽度），它们将在以下行中换行。

Answer 6

另一个建议。您可以在“break（<br/>）”标记中使用clear：both。无需在div中编码。见下文

CSS编码：

.clear {
    clear:both;
    height:0;
    font-size: 1px;
    line-height: 0px;
}

使用HTML：

<br class="clear" />

尝试!!!

Answer 7

最明显的解决方案是将clear: both移动到布局中的下一个元素。如果此ul后面跟div，请div class="clear"等。

Answer 8

清除ul。

Answer 9

我同意Logesh Paul的观点，使用br而不是div变得更加简单。

但我认为你应该把清晰的元素放在循环之外。

“清除：两者”的最佳方式

9 个答案: