关于HTML：如何防止浮动元素的父级崩溃？


How do you keep parents of floated elements from collapsing?

本问题已经有最佳答案，请猛点这里访问。

虽然像这样的元素通常会增长以适应其内容，但使用float属性可能会给CSS新手带来一个令人吃惊的问题：如果浮动元素具有非浮动的父元素，则父元素将崩溃。

例如：

1
2
  Div 1
  Div 2

本例中的父DIV将不会扩展到包含其浮动子级-它似乎具有height: 0。

你如何解决这个问题？

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

解决方案1

浮动父级。

1
2
  Div 1
  Div 2

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

解决方案2

给父母一个明确的高度。

1
2
  Div 1
  Div 2

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

解决方案3

在父元素中附加一个"spacer"元素，如下所示：

1
2
  Div 1
  Div 2

优点：代码简单。缺点：不是语义上的；分隔符DIV只作为布局黑客存在。

解决方案4

将parent设置为overflow: auto。

1
2
  Div 1
  Div 2

优点：不需要额外的分区。缺点：看起来像一个黑客-这不是江户十一〔四〕房地产的既定目的。

评论？其他建议？

相关讨论

解决办法1：

The most reliable and unobtrusive method appears to be this:

Demo：http://jsfiddle.net/so ` uamk/wxaeh/。

HTML：

1
2
3
    Div 1
    Div 2
?

CSS：

ZZU1

？你甚至不需要给父母添加一个等级

这个解决方案是与IE8兼容的，所以你不必担心老浏览器失败。

解决办法2：

一项关于解决办法1的适应行动建议如下：

Demo：http://jsfiddle.net/wxaeh/162/。

HTML：

1
2
3
    Div 1
    Div 2
?

CSS：

1
2
3
4
5
6
7
8
9
10
11
12
.clearfix::after {
   content:"";
   display: block;
   height: 0;
   clear: both;
   *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML += '' );
}

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

这一解决方案需要与IE5.5相容，但未经测试。

解决办法3：

这也有可能建立display: inline-block;和width: 100%;以模拟一个正常的非崩溃元素。

Demo：http://jsfiddle.net/so ` uamk/aevey/。

CSS：

1
2
3
4
.clearfix {
    display: inline-block;
    width: 100%;
}

这一解决办法应与IE5.5兼容，但仅在IE6中测试过。

相关讨论

我通常使用overflow: auto技巧；虽然严格地说，这不是溢出的预期用途，但它有点关联——当然，这足以让人容易记住。float: left本身的含义已经扩展到各种用途，比本例中的溢出更为显著。

相关讨论

不是把overflow:auto放在父母身上，而是把overflow:hidden放在父母身上。

我为任何网页编写的第一个CSS始终是：

1
2
3
div {
  overflow:hidden;
}

那我就不用担心了。

相关讨论

当一个浮动的元素在一个容器框中时，这个元素不会自动强制容器的高度调整到浮动的元素。当一个元素浮动时，它的父元素不再包含它，因为该浮动已从流中移除。您可以使用两种方法来修复它：

  • { clear: both; }
  • clearfix

一旦您了解了正在发生的事情，就可以使用下面的方法"清除修复"它。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
.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%;
}

演示：)

相关讨论

有几个版本的ClearFix，其中NicolasGallagher和ThierryKoblentz是主要作者。

如果您希望支持较旧的浏览器，最好使用此ClearFix：

1
2
3
4
5
6
7
8
9
10
11
12
.clearfix:before, .clearfix:after {
    content:"";
    display: table;
}

.clearfix:after {
    clear: both;
}

.clearfix {
    *zoom: 1;
}

在SCSS中，您应该使用以下技术：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
%clearfix {
  &:before, &:after {
    content:"";
    display:table;
  }

  &:after {
    clear:both;
  }

  & {
    *zoom:1;
  }
}

#clearfixedelement {
    @extend %clearfix;
}

如果您不关心对旧浏览器的支持，有一个较短的版本：

1
2
3
4
5
.clearfix:after {
    content:"";
    display:table;
    clear:both;
}

过去一年里，没有一个陌生人得到了完整的答案，这就是它。

解决方案一：清晰

添加一块清晰的元素：同时，它将清晰地清晰地划过这一点，并阻止元素的父母从崩溃。http://jsfidle.net/tvd2x/1/。

专业：允许你在下面添加一个元素和元素，不受CSS上的浮动元素的影响。

要求另一个标记清除浮，标记。

注：回到IE6，并在禁欲父母(I.E.The input element)上工作，你不能使用：之后。

解决方案二：显示表

添加显示器：桌子；给父母使它脱模并以正确的高度显示。http://jsfidle.net/h9gas/1/。

专业：没有额外的标记，而且是一大堆近乎。Works in IE6+

Cons：Requires invalid CSS to make sure everything plays nice in IE6 and 7.

注：IE6和7 Width Auto used to prevent the Width being 100%+Padding，这不是Newer浏览器的例子。

A note on the other"solutions"

这些固定的工作反馈到低支持浏览器，超过1%的全球使用(IE6)，这意味着：在不切断它之后。

超流隐蔽显示内容，但不防止内容的崩溃，因此不回答问题。使用一个内线块可以产生大的结果，孩子有异常的边缘，因此，桌子上有很多更好的。

建立"防止"崩溃的高度，但这不是一个预先防范的问题。

无效CSS

伤残的CSS从不伤害任何人，事实上，它现在是标准。使用浏览器预先确定的是，使用浏览器特异的黑客是无效的，因此不会影响终端用户的使用。

总结

我用以上的解决方案，使元素正确地反应，并与其他人一起玩，我恳求你也这样做。

相关讨论

理想的解决方案是对列使用inline-block，而不是浮动。我认为，如果您遵循(a)仅将inline-block应用于通常是内联的元素(如span)；以及(b)为firefox添加-moz-inline-box，浏览器支持就相当好了。

在ff2中也检查您的页面，因为在嵌套某些元素时，我遇到了很多问题(令人惊讶的是，这是IE性能比ff好得多的一种情况)。

虽然代码并不是完全语义化的，但我认为在每个容器的底部都有一个我称之为"clearing div"的容器，其中包含了浮动，这更加简单。实际上，我在我的重置块中为每个项目都包含了以下样式规则：

1
2
3
4
.clear
{
   clear: both;
}

如果你正在为IE6设计样式(上帝保佑你)，你可能也要给这个规则一个0px的行高和高度。

相关讨论

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

顺便说一下，我不会担心第四个解决方案是黑客。CSS中的黑客只有在其底层行为受到重新解释或其他更改时才是有害的。这样，你的黑客就不一定能成功了。然而，在这种情况下，您的黑客攻击依赖于overflow: auto的确切行为。搭便车没有坏处。

相关讨论

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
.clearfix:after {
    content:".";
    display: block;
    height: 0;
    clear: both;
    visibility: hidden;
}

.clearfix {
    display: inline-block;
}

* html .clearfix {
    height: 1%;
}

.clearfix {
    display: block;
}

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

就像这样……

1
2
3
4
5
6
7
.cf:after {
    content:"";
    display: block;
    visibility: hidden;
    height: 0;
    clear: both;
}

将其放入样式表中，只需将类"cf"添加到包含浮动的元素中。

我使用的是另一种变体，来自尼古拉斯·加拉赫。

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

1
2
3
4
5
.cf:after {
    content:"";
    display: table;
    clear: float;
}

在底部的父DIV中添加这个

1
 

另一种可能的解决方案，我认为在语义上更正确，就是将浮动的内部元素更改为"display:inline"。这个例子和我在浏览这个页面时所做的工作都使用浮动分隔符，其使用方式与使用跨度的方式完全相同。不使用div，请切换到SPAN，或者如果您使用的另一个元素默认为"display:block"而不是"display:inline"，则将其更改为"display:inline"。我相信这是100%语义正确的解决方案。

解决方案1，浮动父级，本质上是将整个文档更改为浮动。

解决方案2，设置一个明确的高度，就像画一个方框，并说我想在这里放一张图片，也就是说，如果你在做一个img标记，就使用这个。

解决方案3，为清除浮动添加一个间隔符，就像在内容下面添加一行额外的行，也会干扰周围的元素。如果使用这种方法，您可能希望将DIV设置为height:0px。

解决方案4，溢出：自动，承认你不知道如何布局文档，你承认你不知道该怎么做。

相关讨论

你可能发现的主要问题是，所有的东西都可以用中间小鼠的蝴蝶结和一个用户可以将整个场地覆盖。

我认为最好的方法是将clear:both设置为即将到来的元素。

这就是为什么：

1)IE6/7不支持:after选择器，而ff3不支持bugy选择器，&如果您只关心IE8+和FF3.5+结算，那么：之后可能对您最好……

2)overflow应该做些别的事情，所以这个黑客攻击不够可靠。

给作者的注意：在清理时没有什么黑客行为…清除是指跳过浮动字段。很明显，HTML3(谁知道，可能更长)http://www.w3.org/markup/html3/deflists.html，他们应该选择一个不同的名字，比如page:new，但这只是一个细节……