Question

我知道清除漂浮物的旧学校方法是一个明确的类：两者，并且它通常已经过时了。

我知道新学校的方法是宽度：100％;溢出：自动或隐藏;

但是，当我的内容动态扩展到父容器的边界之外时，我无法使用新的学校方法。在这种情况下，是否有比清除更好的方法：两者？

Answer 1

有两种“新学校”方法。一个是溢出，另一个是clearfix。

新学校＃1：

#el { 
   overflow:hidden; 
   zoom:1;
}

溢出visible以外的任何值都会创建一个新的块格式化上下文，导致浮动自动清除。

新学校＃2：

#el:after { 
   content:"";
   clear:both;
   display:block;
}
#el { zoom:1; }

clearfix基本上生成一个块级的不可见空白“元素”，并清除元素后面的区域。这是一个CSS替换，用于插入一个为您清除的空白div。

如果您需要超出边界的元素，请使用＃2。否则，使用＃1。 zoom触发hasLayout，并导致el在IE7之前包含浮点数。 IE7 +了解overflow:hidden。

编辑：正如Grillz指出的那样，content: "\0020";实际上是clearfix的最新，最新的属性值。有一个关于空白的渲染错误，可以通过指定而不是句点，空字符串或一个空格字符串来解决。

Answer 2

她是对的，我发布了一个较旧的帖子以努力巩固，但根据html5样板文件，这是现在的defacto clearfix：

http://www.yuiblog.com/blog/2010/09/27/clearfix-reloaded-overflowhidden-demystified/

.clearfix:before, .clearfix:after {
  content: "\0020"; display: block; height: 0; visibility: hidden;  
} 

.clearfix:after { clear: both; }   
.clearfix { zoom: 1; }

我们在这里使用<br>清除所以我不熟悉新的学校风格。遗憾。

清除没有显示属性的浮动

2 个答案: