清除没有显示属性的浮动答案

【问题标题】：Clearing Floats without Display property清除没有显示属性的浮动
【发布时间】：2010-11-19 19:03:40
【问题描述】：

我知道清除浮动的老派方法是 clear:both 的一个类，而且它通常已经过时了。

我知道新的学校方法是 width:100%;溢出：自动或隐藏；

但是当我的内容动态扩展超出父容器的边界时，我不能使用新的 school 方法。在这种情况下，有没有比 clear:both 更好的方法？

【问题讨论】：

这个帖子应该有帮助：stackoverflow.com/questions/211383/…
@Grillz - 选择的答案已经过时并且非常糟糕。

标签： css css-float

【解决方案1】：

她是对的，我发布了一个较旧的帖子以进行整合，但根据 html5 样板，这是现在事实上的 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> clears，所以我不喜欢新的学校风格。对不起。

【讨论】：

【解决方案2】：

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

新学校#1：

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

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

新学校#2：

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

clearfix 基本上会生成一个不可见的空白“元素”，它是块级的，并清除元素之后的区域。这是插入空白 div 的 CSS 替代品。

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

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

【讨论】：