你如何让浮动元素的父母崩溃？ [重复]

问题描述 投票：951回答：15

这个问题在这里已有答案：

虽然像<div>s这样的元素通常会增长以适应它们的内容，但使用float属性会导致CSS新手的一个令人吃惊的问题：如果浮动元素具有非浮动父元素，则父元素将崩溃。

例如：

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

此示例中的父div不会展开以包含其浮动的子项 - 它似乎具有height: 0。

How do you solve this problem?

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

解决方案1

浮动父母。

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

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

解决方案2

给父母一个明确的高度。

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

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

解决方案3

在父元素中添加“spacer”元素，如下所示：

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

优点：直接编码。 缺点：不是语义; spacer div仅作为布局黑客存在。

解决方案4

将父级设为overflow: auto。

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

优点：不需要额外的div。 缺点：看起来像一个黑客 - 这不是overflow财产的既定目的。

Comments? Other suggestions?

html css layout css-float clearfix
15个回答
515
投票

解决方案1：

最可靠和不引人注目的方法似乎是这样的：

但是：ぁzxswい

HTML：

http://jsfiddle.net/SO_AMK/wXaEH/

CSS：

<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; } 添加类。

此解决方案向后兼容IE8，因此您无需担心旧版浏览器失败。

解决方案2：

已经建议对解决方案1进行调整，如下：

但是：ぁzxswい

HTML：

DIV

CSS：

http://jsfiddle.net/wXaEH/162/

此解决方案似乎向后兼容IE5.5但未经测试。

解决方案3：

也可以设置<div class="clearfix"> <div style="float: left;">Div 1</div> <div style="float: left;">Div 2</div> </div>​ 和.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; } 来模拟正常的块元素而不会崩溃。

但是：ぁzxswい

CSS：

display: inline-block;

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

5
投票

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

http://jsfiddle.net/TVD2X/1/
4
投票

最着名的解决方案之一是使用伪元素而不是非语义html元素的解决方案编号3的变体。

它是这样的......

http://jsfiddle.net/h9GAZ/1/

将它放在样式表中，您只需要将“cf”类添加到包含浮点数的元素中。

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

它做同样的事情，但它更短，看起来更整洁，并且可能用于完成另一件非常有用的事情 - 防止子元素的边缘与它的父母一起崩溃（但为此你需要其他东西 - 阅读更多关于它这里overflow: auto）。

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

.clearfix {
    display: inline-block;
}

* html .clearfix {
    height: 1%;
}

.clearfix {
    display: block;
}
3
投票

将其添加到底部的父div中

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

更改溢出到http://nicolasgallagher.com/micro-clearfix-hack/或.cf:after { content: " "; display: table; clear: float; } 时可能会遇到的主要问题是，所有内容都可以使用鼠标中间部分滚动，用户可以搞乱整个网站布局。

2
投票

我认为在语义上更正确的另一种可能的解决方案是将浮动的内部元素更改为“display：inline”。这个例子和我在遇到这个页面时所做的工作都使用浮动div，其方式与使用span的方式完全相同。而不是使用div，切换到span，或者如果您正在使用默认情况下的另一个元素'display：block'而不是'display：inline'，则将其更改为'display：inline'。我相信这是100％语义正确的解决方案。

解决方案1，浮动父级，实质上是要更改要浮动的整个文档。

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

解决方案3，添加间隔物以清除浮动，就像在内容下方添加额外的线条一样，也会混淆周围的元素。如果使用此方法，您可能希望将div设置为height：0px。

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

0
投票

我相信最好的方法是将 <div style="clear:both"></div> 设置为即将到来的元素。

原因如下：

1）IE6 / 7中不支持auto选择器和FF3中的buggy，但是， 如果你只关心IE8 +和FF3.5 +清除：以后可能最适合你......

2）hidden应该做其他事情，所以这个黑客不够可靠。

作者注意：清除时没有任何hacky ......清除意味着跳过浮动字段。 CLEAR与我们在一起，因为HTML3（谁知道，甚至更长）clear:both，也许他们应该选择一个不同的名称，如page：new，但那仅仅是一个细节......

71
投票

我通常使用width: 100%;技巧;虽然严格来说，这不是溢出的预期用途，但它有点相关 - 足以使其易于记忆，当然。在本例IMO中，http://jsfiddle.net/SO_AMK/ae5ey/本身的含义已经扩展到各种用途，比溢出更为明显。

19
投票

不要把.clearfix { display: inline-block; width: 100%; } 放在父母身上，而是把overflow: auto

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

float: left

然后我再也不用担心了。

18
投票

当浮动元素位于容器框内时，该问题就会发生，该元素不会自动强制容器的高度调整到浮动元素。当一个元素浮动时，它的父元素不再包含它，因为浮动元素从流中移除。您可以使用2种方法来修复它：

  • overflow:auto
  • overflow:hidden

一旦了解了发生的情况，请使用以下方法“清除”它。

div {
  overflow:hidden;
}

{ clear: both; }

14
投票

有几个版本的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%; } 是关键作者。

如果您想要支持旧浏览器，最好使用此clearfix：

Demonstration :)

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

Nicolas Gallagher

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

Thierry Koblentz
9
投票

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

.clearfix:before, .clearfix:after {
    content: "";
    display: table;
}

.clearfix:after {
    clear: both;
}

.clearfix {
    *zoom: 1;
}

如果你是IE6的样式（上帝帮助你），你可能想要给这个规则一个0px的行高和高度。

9
投票

理想的解决方案是使用%clearfix { &:before, &:after { content:" "; display:table; } &:after { clear:both; } & { *zoom:1; } } #clearfixedelement { @extend %clearfix; } 作为列而不是浮动。我认为浏览器支持非常好，如果您遵循（a）仅将.clearfix:after { content:""; display:table; clear:both; } 应用于通常为内联的元素（例如.clear { clear: both; } ）; （b）为Firefox添加inline-block。

在FF2中检查你的页面也是因为我在嵌套某些元素时遇到了很多问题（令人惊讶的是，这是IE执行得比FF好得多的一种情况）。

9
投票

奇怪的是没有人为此提出一个完整的答案，啊，这就好了。

解决方案一：明确：两者

添加样式清除的块元素：两者;在它上面将清除浮点数超过该点并停止该元素的父级崩溃。 inline-block

优点：允许您清除元素，下面添加的元素不受上面浮动元素和有效css的影响。

缺点：需要另一个标签来清除浮点数，膨胀标记。

注意：要回退到IE6并使其适用于弃权父项（即输入元素），您将无法使用：after。

解决方案二：显示：表格

添加显示：表;到父母那里，让它从花车上耸耸肩，并以正确的高度展示。 span

优点：没有额外的加价，而且更加整洁。适用于IE6 +

缺点：需要无效的CSS以确保在IE6和7中一切都很好。

注意：IE6和7宽度自动用于防止宽度为100％+填充，而在较新的浏览器中则不然。

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

这些修复工作回到支持最低的浏览器，全局使用率超过1％（IE6），这意味着使用：after后不切断它。

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

设置高度确实“防止”崩溃，但它不是一个正确的修复。

无效的CSS

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

结论

我使用上述两种解决方案来使元素正确反应并相互配合，我恳请你也这样做。

6
投票

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

顺便说一句，我不会担心第四个解决方案是黑客攻击。只有当他们的潜在行为需要重新解释或其他变化时，CSS中的黑客才会有害。这样，你的黑客就无法保证工作。但是在这种情况下，你的hack依赖于-moz-inline-box的确切行为。搭便车是没有害处的。

最新问题
© www.soinside.com 2019 - 2024. All rights reserved.