如何防止浮动元素的父元素崩溃?

虽然<div>这样的元素通常会增长以适应其内容，但使用float属性可能会给CSS新手带来一个惊人的问题:如果浮动元素具有非浮动的父元素，父元素将会折叠。

例如:

< div > < span style=" font - family:宋体;"> Div 1 < / Div > < span style=" font - family:宋体;"2 > Div < / Div > < / div >

本例中的父div不会展开以包含它的浮动子div——它看起来高度为:0。

你如何解决这个问题?

我想在这里创建一个详尽的解决方案列表。如果您知道跨浏览器兼容性问题，请指出来。

解决方案1

浮动父节点。

< span style=" font - family:宋体;"> < span style=" font - family:宋体;"> Div 1 < / Div > < span style=" font - family:宋体;"2 > Div < / Div > < / div >

优点:语义代码。缺点:你可能不总是希望父元素浮动。即使你这样做了，你是否浮动了父母的父母等等?必须浮动每个祖先元素吗?

解决方案2

给父节点一个明确的高度。

< span style=" font - family:宋体;> < span style=" font - family:宋体;"> Div 1 < / Div > < span style=" font - family:宋体;"2 > Div < / Div > < / div >

优点:语义代码。缺点:不灵活——如果内容改变或浏览器大小调整，布局就会中断。

解决方案3

在父元素中添加一个“spacer”元素，如下所示:

优点:编码简单明了。缺点:没有语义性;分隔符div仅作为布局hack存在。

解决方案4

将parent设置为overflow: auto。

< span style=" font - family:宋体;"> < span style=" font - family:宋体;"> Div 1 < / Div > < span style=" font - family:宋体;"2 > Div < / Div > < / div >

优点:不需要额外的div。缺点:看起来像一个黑客-这不是溢出属性的声明的目的。

评论?其他建议吗?

当前回答

我认为最好的方法是明确:既要对即将到来的元素。

原因如下:

1):after选择器在IE6/7中不支持，在FF3中有bug，但是如果你只关心IE8+和FF3.5+清除:after可能对你来说是最好的…

2) overflow应该做一些其他的事情，所以这个hack不够可靠。

作者注意:在清算方面没有什么hack…清除意味着跳过浮动字段。CLEAR是自HTML3(谁知道呢，也许更久)http://www.w3.org/MarkUp/html3/deflists.html以来就与我们在一起了，也许他们应该选择一个有点不同的名字，比如page: new，但这只是一个细节…

2013-08-05 14:54:26

其他回答

我通常使用overflow: auto trick;虽然严格地说，这不是overflow的预期用途，但它有点相关——当然，这足以让它容易记住。float: left本身的含义已经扩展到各种用途，在这个例子中，比overflow更重要。

2008-10-20 15:20:24

理想的解决方案是对列使用内联块，而不是浮动。我认为浏览器的支持是非常好的，如果你遵循(a)应用内联块的元素通常是内联的(如span);(b)为Firefox添加-moz-inline-box。

在FF2中检查你的页面，因为我在嵌套某些元素时遇到了很多问题(令人惊讶的是，这是IE比FF表现更好的一种情况)。

2009-03-05 23:41:20

我在适用的情况下使用2和4(即当我知道内容的高度或溢出不会造成伤害时)。在其他地方，我用解3。顺便说一下，您的第一个解决方案与3个解决方案相比没有任何优势(我可以发现)，因为它使用了相同的虚拟元素，因此没有更多的语义。

顺便说一下，我不担心第四个解决方案是一个黑客。CSS中的黑客只有在其底层行为受到重新解释或其他变化的影响时才会有害。这样，你的黑客就不能保证有效。然而，在这种情况下，你的黑客依赖于溢出的确切行为:auto是意味着有。搭顺风车也无妨。

2008-10-20 15:24:31

奇怪的是，还没有人提出一个完整的答案，啊，好吧，就是这样。

解决方案一:明确:两者都有

添加一个block元素，样式为clear:both;on它将清除经过该点的浮点数，并阻止该元素的父元素折叠。http://jsfiddle.net/TVD2X/1/

优点:允许你清除一个元素，你在下面添加的元素不会被上面的浮动元素和有效的css影响。

缺点:需要另一个标记来清除浮动，膨胀的标记。

注意:回到IE6，让它在禁欲的父母(即输入元素)上工作，你不能使用:after。

解决方案二:显示:表

添加显示:表;到父节点，使它摆脱浮动并显示正确的高度。http://jsfiddle.net/h9GAZ/1/

优点:没有额外的标记，更整洁。支持IE6+

缺点:需要无效的css来确保在IE6和7中一切都很好。

注意:IE6和ie7 width auto用于防止宽度为100%+填充，这在新浏览器中不是这样的。

关于其他“解决方案”的说明

这些修复可以回溯到最低支持的浏览器，全球使用率超过1% (IE6)，这意味着使用:after并不能解决问题。

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

设置高度确实“防止”了坍塌，但这不是一个合适的解决办法。

无效的css

无效的css不会伤害任何人，事实上，它现在是常态。使用浏览器前缀就像使用浏览器特定的黑客一样无效，并且不会影响最终用户。

总之

我使用上述两种解决方案来使元素正确地反应并彼此良好地发挥作用，我恳求你也这样做。

2012-10-17 13:38:07

解决方案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;宽度:100%;在不折叠的情况下模拟一个正常的块元素。

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

CSS:

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

该解决方案应该向后兼容IE5.5，但只在IE6中进行了测试。

2012-07-22 04:48:22

如何防止浮动元素的父元素崩溃?

推荐文章

最新文章

标签