css - clear :both or overflow:auto,哪个好？

Question

我真的不明白clear:both和overflow:auto有什么区别

我对其进行了测试，功能以相同的方式工作，有人可以解释为什么这两个以相同的方式工作吗？

从我在一些文章和问题中看到的，

overflow:auto 可用于内部有 float 的容器。而且使用空 div 不占用空间。

不过，我对此表示怀疑，它可能会在未来搞砸我的代码。

这是与我的问题类似的问题列表。然而，它没有我的问题的答案，可能对我来说是模糊的。

hr clear vs div clear. Which is better?

3 column html template - content overflows though there is clear both and height is 100%

Answer 1

overflow: auto(或hidden)至少在容器具有设定高度的情况下是 Not Acceptable ，因为这会产生滚动条(或 overflow hidden 的内容)。

http://jsfiddle.net/xSzcC/

无论如何， float 清除都是通过 clear 规则来完成的。

现代浏览器的明确修复是 very easy now .

http://jsfiddle.net/xSzcC/1/

在链接失效的情况下，功能部分是:

.cf:before,
.cf:after {
    content:"";
    display:table;
}

.cf:after {
    clear:both;
}