清除浮动而不使用display属性

Question

我知道清除浮动的旧方法是使用clear:both的类，但它已经过时了。

我知道新方法是width:100%; overflow:auto或hidden;

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

- Matrym

---

这个帖子应该会有所帮助：https://dev59.com/CnVC5IYBdhLWcg3wsTZi。 - Gregg B

@Grillz - 那个被选中的答案已经过时且是非常糟糕的做法。 - meder omuraliev

Answer 1

有两种“新派”的方法。一种是溢出（overflow），另一种是清除浮动（clearfix）。

新派方法 #1：

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

任何除了visible以外的值都会创建一个新的块级格式上下文，从而自动清除浮动。

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

清除浮动的方法基本上是生成一个不可见的空格“元素”，它是块级元素，并在元素后清除区域。这是CSS替代方案，可以为您插入一个清除的空白div。

如果你需要一个超出边界的元素，请使用#2。否则，请使用#1。`zoom` 触发 `hasLayout`，并使 el 在 IE7 之前包含浮动。IE7+ 可以理解 `overflow:hidden`。 编辑：正如 Grillz 指出的那样，如果您选择这条路线，则 content: "\0020"; 实际上是最新的属性值。关于空格的呈现错误可以通过指定它来解决，而不是一个句点、空字符串或一个空格字符串。

- meder omuraliev

Answer 2

她说得对，我之前发布了一个旧的帖子，试图整合内容，但根据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>清除，所以我对新的风格不太了解。抱歉。

- Gregg B