Question

<style>
.cl {clear:both;}
.block {}
.left {float:left;}
</style>

<div class="block">
   <div class="left">Title 1</div>
   <div class="left">Value 1</div>
   <div class="cl"></div>
</div>
<div class="block">
   <div class="left">Title 2</div>
   <div class="left">Value 2</div>
   <div class="cl"></div>
</div>

是否可以避免在每个<div class="cl"></div>的末尾添加.block？

Answer 1

此问题有两个常见的解决方案。

将overflow: hidden添加到浮动元素的父级（在本例中为.block）。
使用“clearfix”：http://nicolasgallagher.com/micro-clearfix-hack/

此处提供更多信息：Is clearfix deprecated?

使用clear: both的好时机是当已经有一个可用于添加它的元素时。

例如，带有页脚的浮动列的常见情况：http://jsfiddle.net/thirtydot/vhBkM/

Answer 2

你可以这样做：

<style>
    br {clear:both;}
</style>
<div class="block">
    <div class="left">Title 2</div>
    <div class="left">Value 2</div>
</div>
<br/>

第二个选项：@animuson评论

<style>
    .container br {clear:both;}
</style>
<div class="container">
   <div class="block">
       <div class="left">Title 2</div>
       <div class="left">Value 2</div>
   </div>
   <br/>
</div>

Answer 3

你根本不需要<div class="cl"></div> div。只需将clear: both放在块div上。

示例：http://jsfiddle.net/mKazr/

CSS

.block {
    clear: both;
    overflow: hidden; /* If you want to make the div size to the contents and not collapse use this line (from thirtydot answer) */
} 
.left { float:left; }

HTML

<div class="block">
   <div class="left">Title 1</div>
   <div class="left">Value 1</div>
</div>
<div class="block">
   <div class="left">Title 2</div>
   <div class="left">Value 2</div>
</div>

编辑：添加代码

Answer 4

尝试在overflow:hidden上使用.block我知道有时会修复它。

如何清除：两者;是否正确？

4 个答案: