清除：both或overflow：auto，哪个更好？ [英] clear:both or overflow:auto, which is better?

问题描述

我真的不明白清除：和溢出之间有什么区别：auto

根据我在一些文章和问题中看到的内容，

/ p>

overflow：auto可以用在一个容器中，里面有浮点。

仍然，我有疑问，它可能会在未来弄乱我的代码。 / p>

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

hr清除vs清除。哪个更好？

解决方案

overflow：auto （或 hidden ）

http://jsfiddle.net/xSzcC/\">http://jsfiddle.net/xSzcC/

浮动结算的目的是通过 clear 规则。

现代浏览器的清除修正非常容易现在。

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

如果功能部分是：

  .cf：before，
 .cf：after {
内容：; 
 display：table; 
} 
 
 .cf：after {
 clear：both; 
} 
  

I really don't understand what's the difference between clear:both and overflow:auto

I tested it out and the functionality works the same way, would someone explain why those two works the same way?

From what I've seen in some articles and questions,

overflow:auto can be used in a container with floats inside it. and it takes up no space to using an empty div.

Still, I have doubts on it, it might screwed up my codes in the future.

Here are the list of questions that's similar to my question. Yet, it doesn't have the answer to my question, probably it's vague for me.

hr clear vs div clear. Which is better?

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

解决方案

overflow: auto (or hidden) is not acceptable at least in cases where the container has a set height as this will engender a scrollbar (or hide the overflowing content).

http://jsfiddle.net/xSzcC/

Float clearing is intended to be done by the clear rule anyway.

Clear-fixing for modern browsers is very easy now.

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

In case of link rot, the functional part is:

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

.cf:after {
    clear:both;
}

这篇关于清除：both或overflow：auto，哪个更好？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！