Question

我对clear:x;属性有一些疑问。

前奏：我需要制作一个列表，元素必须作为网格放置。另外，我需要使它与IE7或更高版本兼容。

这是我的HTML：

<ul>
    <li>A</li>
    <li>B</li>
    <li>C</li>
    <li>D</li>
</ul>

CSS（ul + li是模仿nth-of-type的技巧;在实际代码中，我按行排列了十个元素）：

ul {list-style:none; margin:0; padding:0;}
ul li{background:pink; border:1px solid red; height:1em; width:1em; float:left; margin:0 .2em .2em 0; padding:.3em}
ul li + li + li {clear:left;}
ul li + li + li +li {clear:none;}

这很有效。 Here's a fiddle

但是，首先，我的直觉让我在第二个clear:right中加了一个li。但是这段代码不起作用，这里是the corresponding fiddle。

为什么这不起作用？预计第二个li不会清除他右边的第三个li吗？

Answer 1

它不起作用，因为clear没有清除文档顺序中元素之后的元素。你的小提琴中没有任何元素都是：位于你设置clear: right的元素的右侧，并按文档顺序排在该元素之前。

我希望这能澄清你的问题： - ）

Answer 2

clear：right属性不会阻止元素被放入清除元素后的那个空格。它会阻止元素被放置在已经有元素浮动的地方之前的方向 - ahruss

当您需要使用float:left;时，您正在使用clear:left; 如果您使用的是float:right;，则可能会导致clear:right;的换行符你可以在这里查看这2个行为这里是a Fiddle

因此，当您在clear:left上使用"C" li时，会导致换行。
您还可以使用clear:both;导致换行符。
或者你只是使用<br />。

正确使用'clear'属性（与浮动元素相关）

2 个答案: