你如何让浮动元素的父母崩溃？

Question

尽管像<div>s 这样的元素通常会增长以适应其内容,但使用该float属性可能会给 CSS新手带来惊人的问题:如果浮动元素具有非浮动父元素,则父元素将崩溃.

例如:

<div>
  <div style="float: left;">Div 1</div>
  <div style="float: left;">Div 2</div>
</div>

此示例中的父div 不会展开以包含其浮动的子项 - 它似乎具有height: 0.

你怎么解决这个问题？

我想在这里创建一个详尽的解决方案列表.如果您了解跨浏览器兼容性问题,请指出它们.

解决方案1

浮动父母.

<div style="float: left;">
  <div style="float: left;">Div 1</div>
  <div style="float: left;">Div 2</div>
</div>

优点:语义代码.
缺点:您可能并不总是希望父级浮动.即使你这样做,你是否漂浮了父母的父母,等等？你必须浮动每个祖先元素吗？

解决方案2

给父母一个明确的高度.

<div style="height: 300px;">
  <div style="float: left;">Div 1</div>
  <div style="float: left;">Div 2</div>
</div>

优点:语义代码.
缺点:不灵活 - 如果内容更改或浏览器调整大小,布局将中断.

解决方案3

在父元素中添加"spacer"元素,如下所示:

<div>
  <div style="float: left;">Div 1</div>
  <div style="float: left;">Div 2</div>
  <div class="spacer" style="clear: both;"></div>
</div>

优点:直接编码.
缺点:不是语义; spacer div仅作为布局黑客存在.

解决方案4

将父级设置为overflow: auto.

<div style="overflow: auto;">
  <div style="float: left;">Div 1</div>
  <div style="float: left;">Div 2</div>
</div>

优点:不需要额外的div.
缺点:看起来像一个黑客 - 这不是该overflow财产的既定目的.

评论？其他建议？

Answer 1

解决方案1:

最可靠和不引人注目的方法似乎是这样的:

演示:http://jsfiddle.net/SO_AMK/wXaEH/

HTML:

<div class="clearfix">
    <div style="float: left;">Div 1</div>
    <div style="float: left;">Div 2</div>
</div>?

CSS:

.clearfix::after { 
   content: " ";
   display: block; 
   height: 0; 
   clear: both;
}

通过一些CSS定位,您甚至不需要向父级添加类DIV.

此解决方案向后兼容IE8,因此您无需担心旧版浏览器失败.

解决方案2:

已经建议对解决方案1进行调整,如下:

演示:http://jsfiddle.net/wXaEH/162/

HTML:

<div class="clearfix">
    <div style="float: left;">Div 1</div>
    <div style="float: left;">Div 2</div>
</div>?

CSS:

.clearfix::after { 
   content: " ";
   display: block; 
   height: 0; 
   clear: both;
   *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML += '<div class="ie7-clear"></div>' );
}

.ie7-clear {
    display: block;
    clear: both;
}

此解决方案似乎向后兼容IE5.5但未经测试.

解决方案3:

也可以在不折叠的情况下设置display: inline-block;和width: 100%;模拟普通块元素.

演示:http://jsfiddle.net/SO_AMK/ae5ey/

CSS:

.clearfix {
    display: inline-block;
    width: 100%;
}

此解决方案应向后兼容IE5.5,但仅在IE6中进行了测试.

Answer 2

我经常使用这个overflow: auto技巧; 虽然这不是严格来说,溢出的用途,它是有点关系-足以令它容易记住,一定.float: left在这个例子中,IMO本身的含义已经扩展到各种用途,而不是溢出.

Answer 3

放入overflow:auto,而不是放在父母身上overflow:hidden

我为任何网页写的第一个CSS总是:

div {
  overflow:hidden;
}

然后我再也不用担心了.

Answer 4

当浮动元素位于容器框内时,该问题就会发生,该元素不会自动强制容器的高度调整到浮动元素.当一个元素浮动时,它的父元素不再包含它,因为浮动元素从流中移除.您可以使用2种方法来修复它:

• { clear: both; }
• clearfix

一旦了解了发生的情况,请使用以下方法"清除"它.

.clearfix:after {
    content: ".";
    display: block;
    clear: both;
    visibility: hidden;
    line-height: 0;
    height: 0;
}

.clearfix {
    display: inline-block;
}

html[xmlns] .clearfix {
    display: block;
}

* html .clearfix {
    height: 1%;
}

示范:)

Answer 5

clearfix有几个版本,Nicolas Gallagher和Thierry Koblentz是主要作者.

如果您想要支持旧浏览器,最好使用此clearfix:

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

.clearfix:after {
    clear: both;
}

.clearfix {
    *zoom: 1;
}

在SCSS中,您应该使用以下技术:

%clearfix {
  &:before, &:after {
    content:" ";
    display:table;
  }

  &:after {
    clear:both;
  }

  & {
    *zoom:1;
  }
}

#clearfixedelement {
    @extend %clearfix;
}

如果您不关心对旧版浏览器的支持,那么版本较短:

.clearfix:after {
    content:"";
    display:table;
    clear:both;
}

Answer 6

虽然代码不是完全语义的,但我认为在每个容器的底部都有一个我称之为"清除div"的浮点数更直接.事实上,我在每个项目的重置块中都包含以下样式规则:

.clear 
{
   clear: both;
}

如果你是IE6的样式(上帝帮助你),你可能想要给这个规则一个0px的行高和高度.

Answer 7

理想的解决方案是使用inline-block列而不是浮动.我认为如果您遵循(a)inline-block仅适用于通常内联的元素(例如span),浏览器支持非常好; (b)添加-moz-inline-boxFirefox.

在FF2中检查你的页面也是因为我在嵌套某些元素时遇到了很多问题(令人惊讶的是,这是IE执行得比FF好得多的一种情况).

Answer 8

奇怪的是没有人为此提出一个完整的答案,啊,这就好了.

解决方案一:明确:两者

添加样式清除的块元素:两者; 在它上面将清除浮点数超过该点并停止该元素的父级崩溃.http://jsfiddle.net/TVD2X/1/

优点:允许您清除元素,下面添加的元素不受上面浮动元素和有效css的影响.

缺点:需要另一个标签来清除浮点数,膨胀标记.

注意:要回退到IE6并使其适用于禁用父项(即输入元素),您将无法使用:after.

解决方案二:显示:表格

添加显示:表; 到父母那里,让它从花车上耸耸肩,并以正确的高度展示.http://jsfiddle.net/h9GAZ/1/

优点:没有额外的加价,而且更加整洁.适用于IE6 +

缺点:需要无效的CSS以确保在IE6和7中一切都很好.

注意:IE6和7宽度自动用于防止宽度为100%+填充,而在较新的浏览器中则不然.

关于其他"解决方案"的说明

这些修复工作回到支持最低的浏览器,全局使用率超过1%(IE6),这意味着使用:after后不切断它.

隐藏溢出确实显示内容,但不会阻止元素折叠,因此不会回答问题.使用内联块可能有错误的结果,孩子有奇怪的边距等等,表格要好得多.

设置高度确实"防止"崩溃,但它不是一个正确的修复.

无效的CSS

无效的CSS从来没有伤害任何人,事实上,它现在是常态.使用浏览器前缀与使用浏览器特定的黑客一样无效,并且不会影响最终用户.

结论

我使用上述两种解决方案来使元素正确反应并相互配合,我恳请你也这样做.

Answer 9

我在适用的地方使用2和4(即当我知道内容的高度或溢出不会造成伤害时).在其他任何地方,我都使用解决方案3.顺便说一句,你的第一个解决方案没有超过3的优势(我可以发现),因为它不再具有语义,因为它使用相同的虚拟元素.

顺便说一句,我不会担心第四个解决方案是黑客攻击.只有当他们的潜在行为需要重新解释或其他变化时,CSS中的黑客才会有害.这样,你的黑客就不能保证工作了.但是在这种情况下,你的hack依赖于具有的确切行为overflow: auto.搭便车是没有害处的.

Answer 10

我最喜欢的方法是为父元素使用clearfix类

.clearfix:after {
    content: ".";
    display: block;
    height: 0;
    clear: both;
    visibility: hidden;
}

.clearfix {
    display: inline-block;
}

* html .clearfix {
    height: 1%;
}

.clearfix {
    display: block;
}