如何僅清除最後一個浮動塊

我有多個浮動塊。是否可以指定應清除哪個塊？如何僅清除最後一個浮動塊

檢查以下結構：

+------------+ +--------------------+ 
|   | |+--------+ +-------+| 
| float:left | ||fl left | |fl left|| 
|   | |+--------+ +-------+| 
|   | |+------------------+| 
|   | ||     || 
|   | || block that clears|| 
|   | || prev 2 floated || 
|   | || blocks but doesn't| 
|   | || clear first fl. || 
|   | || block   || 
|   | |+------------------+| 
|   | +--------------------+ 
+------------+

在HTML

：

<div class="floated-left-column"> 
    left column content 
</div> 
<div class="right-column"> 
    <div> 
     <div class="float-left">...</div> 
     <div class="float-left">...</div> 
    </div> 
    <div> 
     This block should clear only ".float-left" blocks (not ".floated-left-column") 
    </div> 
    <div> 
     Here is some content 
    </div> 
</div>

來源

2012-07-02 fedor.belov

你有一些你一直在使用的代碼嗎？ –

-1

這可能是很容易使用做。如果你從頭開始設計一個新的網站，bootstrap是一個很好的開始。

來源

2012-07-02 16:06:41

不錯，但是這並不能回答這個問題。 –

你需要將父塊左右浮動。您可以在子容器中浮動和清除，並且父容器不會清除。

我看到你現在增加了一個例子。浮動離開DIV「右欄」

來源

2012-07-02 16:07:19 Richthofen

我不能浮動「。右列」，因爲它打破布局 –

這是基本的HTML/CSS佈局。看看this JSFiddle example。

當您清除一個浮點數時，它通常只會清除同一個容器內的浮點數或更低。這就是爲什麼當你把clear: both放入你的容器中時，它會清除的所有內容。

來源

2012-07-02 16:13:45

我用下面的html解決了它。感謝您的幫助。這是我的問題的解決方案（它的工作原理，但我不知道它適用於其他瀏覽器等）？

<div class="floated-left-column"> 
    left column content 
</div> 
<div class="right-column"> 
    <div class="floated-left-with-100-precent-width"> 
     <div> 
      <div class="float-left">...</div> 
      <div class="float-left">...</div> 
     </div> 
     <div class="clearfix"></div> 
    </div> 

    <div> 
     This block should clear only ".float-left" blocks (not ".floated-left-column") 
    </div> 
    <div> 
     Here is some content 
    </div> 
</div>

來源

2012-07-02 16:44:09

如何僅清除最後一個浮動塊

回答

相關問題