代码之家 › 专栏 › 技术社区 › Matrym

清除不带显示属性的浮动

clear css-float css

3

Matrym · 技术社区 · 14 年前

我知道旧式的清除漂浮物的方法是一门清除漂浮物的课程:两者兼而有之,而且它通常已经过时了。

我知道新的方法是宽度:100%;溢出:自动或隐藏;

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

2 回复 | 直到 13 年前

1

2

Gregg B 14 年前

她是对的,我发布了一个旧的线程来整合,但是根据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> 我不喜欢新的学校风格。对不起的。

2

meder omuraliev 14 年前

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

新学校1:

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

任何东西的价值 visible to overflow创建一个新的块格式上下文,该上下文将自动清除浮动。

新学校2:

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

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

如果需要超出边界的元素,请使用#2。否则,使用1。这个 zoom 触发器hasLayout,并使el在IE7之前包含浮动。IE7+了解 overflow:hidden .

编辑 :正如Grillz指出的, content: "\0020"; 实际上是clearfix的最新、最新的属性值。出现了一个与空白有关的呈现错误,可以通过指定空白来解决,而不是指定句点、空字符串或一个空格字符串。