layout - 如何保持浮动的父级元素不折叠?

  显示原文与译文双语对照的内容

这个问题已经有了如下答案:

虽然像 <div> 这样的元素通常能够适应它们的内容,但是使用 float 属性会给CSS新手带来令人吃惊的问题: 如果浮动元素有non-floated父元素,父母将会崩溃。

例如:


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

Pros: 语义代码。
Cons: 你可能不总是想要floated浮动。 即使你这么做了,你也会浮动父母的父母,等等? 必须浮动每个祖先元素?

解决方案 2

给父级一个明确的高度。


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

Pros: 语义代码。
:不灵活- 如果内容更改或者浏览器调整了大小,布局将中断。

解决方案 3

在父元素中附加一个"间隔"元素,如下所示:


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

优点:简单的代码。
缺点:不是语义;间隔div布局 hack 只存在。

解决方案 4

将父级设置为 overflow: auto


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

的专业: 不需要额外的div 。
英镑 Cons: 似乎是一个 hack - 这不是属性目的的overflow

评论其他建议?

时间:

我通常使用 overflow: auto 技巧;虽然不,严格地说,溢出的用途,它有点相关——足以使它容易记住,当然。 float: left 本身的含义已经得到了扩展,在这个例子中,比溢出更显著的用法是:IMO 。

当浮动元素在容器框中时发生这里问题,该元素不会自动强制容器高度调整到浮动元素。 当一个元素被浮动时,它的父元素不再包含它,因为它是从流中删除的。 你可以使用 2方法来修复它:

  • { clear: both; }
  • clearfix

一旦你理解了发生的事情,使用下面的方法来"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%;
}

演示:)

而不是把 overflow:auto 放在父级上,放入 overflow:hidden

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


div {
 overflow:hidden;
}

那我就不用担心它了。

理想的解决方案是使用 inline-block 代替浮动。 我认为浏览器支持是相当好的如果你遵循( 一个) 只对通常内联( 例如 span )的元素应用 inline-block ;而( b ) 添加 -moz-inline-box 为 Firefox 。

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

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


.clear 
{
 clear: both;
}

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

使用 2和 4 ( 例如 ) 。 当我知道内容的高度或者溢出不危害时。 在其他地方,我使用解决方案 3 。 顺便说一下,你的第一个解决方案没有 3 ( 我可以找到)的优势,因为它没有任何语义,因为它使用了相同的虚拟元素。

顺便说一下,我不关心第四个解决方案是 hack 。 黑客在css中只会是有害的,如果他们潜在的行为重新解释或其他变化。 这样,你的hack 就不会被保证工作。 但是,在这种情况下,你的hack 依赖于 overflow: auto 所具有的精确行为。 搭便车没有害处。

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


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

.clearfix {
 display: inline-block;
}

* html. clearfix {
 height: 1%;
}

.clearfix {
 display: block;
}

最著名的解决方案之一是解决方案编号 3,它使用伪元素而不是 non-semantic html元素。

就像这样。


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

你将它放在样式表中,你所需要的就是将类'cf'添加到包含float的元素。

我所使用的是来自 Nicolas Gallagher的另一个变种。

它做同样的事情,但它是短,看起来整洁,也许用来完成另一件事是很有用的——防止子元素'与它的双亲一起折叠的边距'(但是你需要别的东西——在这里阅读更多关于 http://nicolasgallagher.com/micro-clearfix-hack/ )。


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

...