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

虽然<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。缺点:看起来像一个黑客-这不是溢出属性的声明的目的。

评论?其他建议吗?

当前回答

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

其他回答

最著名的解决方案之一是您的解决方案3的变体，它使用伪元素而不是非语义html元素。

大概是这样的……

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

你把它放在你的样式表中，你所需要做的就是将类'cf'添加到包含浮点数的元素中。

我用的是尼古拉斯·加拉格尔的另一个变体。

它做同样的事情，但它更短，看起来更整洁，可能用来完成另一件非常有用的事情——防止子元素的边缘与它的父元素的边缘一起崩溃(但为此你确实需要其他东西-阅读更多关于它的信息，请点击http://nicolasgallagher.com/micro-clearfix-hack/)。

.cf:after {
    content: " ";
    display: table;
    clear: float;
}

与其把overflow:auto放在父对象上，不如把overflow:hidden放在父对象上

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

div {
  overflow:hidden;
}

那我就再也不用担心了。

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

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

将此添加到底部的父div中

 <div style="clear:both"></div>

推荐文章