正確使用「清除」屬性（與浮動元素有關）

我對clear:x;屬性有一些懷疑。正確使用「清除」屬性（與浮動元素有關）

前言：我需要創建一個列表，並且元素必須放置爲網格。另外，我需要使其與IE7或更高版本兼容。

這裏是我的HTML：

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

而CSS（UL +李是模擬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？

來源

2014-02-06 Arkana

class'.clear {clear：both; }'會工作 - 現在你只需要在像'

'這樣的''li'元素後創建一個div，然後你就可以開始:) –

清晰的：右鍵屬性不會阻止被放置在該空間中的清除元素之後的元素。它可以防止元素放在那裏已經漂到元素之前它方向 - ahruss

您使用的是float:left;這就是當你需要如果您使用的是float:right;使用clear:left;
比你可能會導致一個clear:right;
換行符您可以在這裏看看這個2行爲下面是a Fiddle

所以，當你在"C" li使用clear:left那麼它將導致換行符。
您也可以使用clear:both;導致換行符。
或者您只是使用<br />。

來源

2014-02-07 07:47:55

它不起作用，因爲clear不清除以文檔順序排列的元素。您的小提琴中沒有任何元素都位於元素的右側，其中clear: right已設置並且以文檔順序位於該元素之前。

我希望這闡明你的問題:-)

來源

2014-02-07 06:54:17

正確使用「清除」屬性（與浮動元素有關）

回答

相關問題