html - 如何清除:both; correctly?

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

这个问题有两种常见解决方案。

1. 将 overflow: hidden 添加到 float 元素的父级(因此在本例中为 .block)。
2. 使用“clearfix”:http://nicolasgallagher.com/micro-clearfix-hack/

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

---

使用 clear: both 的好时机是当您已经有一个元素可以添加到其中时。

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