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

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

评论?其他建议吗?

当前回答

将此添加到底部的父div中

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

2014-07-01 18:06:25

其他回答

虽然代码不是完美的语义，但我认为在每个容器的底部都有一个我称之为“清除div”的东西会更直接。事实上，我在每个项目的重置块中都包含了以下样式规则:

.clear 
{
   clear: both;
}

如果你正在为IE6设计样式(上帝帮助你)，你可能想给这个规则一个0px的line-height和height。

2008-10-20 18:57:43

将此添加到底部的父div中

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

2014-07-01 18:06:25

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

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

.clearfix {
    display: inline-block;
}

* html .clearfix {
    height: 1%;
}

.clearfix {
    display: block;
}

2013-10-15 10:35:10

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;
}

2014-11-29 18:40:42

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

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

2009-03-05 23:41:20

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

推荐文章

最新文章

标签