Question

我有多个浮动块。是否可以指定应清除哪个块？

检查以下结构：

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

in 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>

Answer 1

您还需要在“左侧”右侧浮动父块。您可以在子容器中浮动和清除，父容器也不会清除。

我看到你现在添加了一个例子。 Float离开了DIV“右栏”

Answer 2

这是基本的HTML / CSS布局。看看this JSFiddle example。

清除浮子时，通常只清除同一容器内的浮子或更低的浮子。这就是为什么当您将clear: both的内容放入顶层的容器时，它会清除所有内容。

Answer 3

我用以下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>

Answer 4

使用bootstrap可能很容易。如果你是从头开始设计一个新站点，那么bootstrap是一个很好的起点..

我怎样才能清除最后一个浮动块

4 个答案: