CSS float。是否有可能打破流動？

Question

在我的html頁面我有這樣的情況：一個又一個的顯示

<div1><div2><div3><div4><div5><div6><div7><div8><div9> ...

剛出浮動的div。他們都有CSS樣式浮動：左

我想實現這樣的結果：

<div1><div2> 
<div3><div4><div5><div6><div7> 
<div8><div9>... 

基本上，我想打破DIV3和DIV8流（或任何DIV祝）通過告訴它以新的行開始。所有其他元素應該在div進入新行之後。我試着用清除：左邊或清除：左邊對div3或div8，但它沒有工作。 DIV會去新的生產線，但所有其他人將繼續他們在那裏，產生令人失望的結果：

<div1><div2><div4><div5><div6><div7><div9> 
<div3> 
<div8>... 

有這裏的任何好的和簡單的解決方案？謝謝。

Answer 1

對於上帝的愛...不要將任何額外的divs引入您的標記。如果您的設計是正確的，則可以使用clear:left。 （你確實知道HTML有一個可供選擇的塊級元素的全部選擇）使用它們可能會使你的定位更容易一些......

CSS

div { 
    float:left; 
    margin-right:2ex; 
    width:3em; 
} 

#div3, #div8 { 
    clear:left; 
} 

HTML

<div>1</div><div>2</div> 
<div id="div3">3</div><div>4</div><div>5</div><div>6</div><div>7</div> 
<div id="div8">8</div><div>9</div> 

小提琴：http://jsfiddle.net/d68pr/

編輯 這裏是一個不需要任何標識，類或額外div-itus

<div>1</div> 
<div>2</div> 
<div>3</div> 
<div>4</div> 
<div>5</div> 
<div>6</div> 
<div>7</div> 
<div>8</div> 
<div>9</div> 

div:nth-child(3), div:nth-child(8) { 
    clear:left; 
} 

http://jsfiddle.net/TMxSE/

** **警告可能nth-child無法在某些瀏覽器。檢查您的流量統計信息，以確保IE8，以下是您的用戶羣中的一小部分。或者那些用戶的體驗是可以接受的。

Answer 2

我想試試這個：

<div1><div2> 
<div style="clear:both"></div> 
<div3><div4><div5><div6><div7> 
<div style="clear:both"></div> 
<div8><div9>... 

OR

<div><div1><div2></div> 
<div><div3><div4><div5><div6><div7></div> 
<div><div8><div9></div>... 

放置在它自己的<div>每行默認情況下，將上面和下面清除

Answer 3

我覺得包裹在自己的每一行div會工作：

<div><div1><div2></div> 
<div><div3><div4><div5><div6><div7></div> 
<div><div8><div9>...</div> 

Answer 4

試試看。我認爲這將起作用

<div style="clear:left"> 
    <div1><div2> 
</div> 
<div style="clear:left"> 
    <div3><div4><div5><div6><div7> 
</div> 
<div style="clear:left"> 
    <div8><div9> 
</div> 

Answer 5

你不需要額外的div來清除，把你想要開始下一行的div都清除。

<div></div> 
<div></div> 
<div></div> 
<div></div> 
<div></div> 
<div class="clear"></div> 
<div></div> 
<div></div> 


.clear{clear:both;} 

將5個div放在第一行，然後將剩下的打到第二行。演示：http://jsfiddle.net/calder12/jQGdv/1/