1055

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

例如：

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

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

解决方案 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>

优点：代码简单。
缺点：不是语义；间隔 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物业的既定目的。

注释？其他建议？

4

15 回答 15

552

解决方案1：

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

演示：http: //jsfiddle.net/SO_AMK/wXaEH/

HTML：

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

​使用一点 CSS 定位，您甚至不需要向 parent 添加一个类DIV。

此解决方案向后兼容 IE8，因此您无需担心旧版浏览器会出现故障。

解决方案2：

已建议对解决方案 1 进行修改，如下所示：

演示：http: //jsfiddle.net/wXaEH/162/

HTML：

<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;
   *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML += '<div class="ie7-clear"></div>' );
}

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

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

解决方案3：

也可以在不折叠的情况下设置display: inline-block;和width: 100%;模拟普通块元素。

演示：http: //jsfiddle.net/SO_AMK/ae5ey/

CSS：

.clearfix {
    display: inline-block;
    width: 100%;
}

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

于 2012-07-22T04:48:22.187 回答
81

我通常使用这个overflow: auto技巧；虽然严格来说，这不是溢出的预期用途，但它有点相关 - 足以让它很容易记住，当然。其本身的含义float: left已扩展到各种用途，比在此示例中的溢出更显着，IMO。

于 2008-10-20T15:20:24.143 回答
20

overflow:auto与其放在父母身上，不如放在overflow:hidden

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

div {
  overflow:hidden;
}

那我就不用担心了。

于 2010-03-03T17:25:10.660 回答
18

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

  • { clear: both; }
  • 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%;
}

示范:)

于 2010-03-03T17:33:17.943 回答
15

There are several versions of the clearfix, with Nicolas Gallagher and Thierry Koblentz as key authors.

If you want support for older browsers, it's best to use this clearfix :

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

.clearfix:after {
    clear: both;
}

.clearfix {
    *zoom: 1;
}

In SCSS, you should use the following technique :

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

  &:after {
    clear:both;
  }

  & {
    *zoom:1;
  }
}

#clearfixedelement {
    @extend %clearfix;
}

If you don't care about support for older browsers, there's a shorter version :

.clearfix:after {
    content:"";
    display:table;
    clear:both;
}
于 2014-11-29T18:40:42.097 回答
9

理想的解决方案是使用inline-block列而不是浮动。inline-block如果您遵循 (a)仅适用于通常内联的元素（例如），我认为浏览器支持非常好span；(b)-moz-inline-box为 Firefox 添加。

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

于 2009-03-05T23:41:20.610 回答
9

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

.clear 
{
   clear: both;
}

如果您正在为 IE6 设计样式（上帝帮助您），您可能还想给这个规则一个 0px 的行高和高度。

于 2008-10-20T18:57:43.767 回答
9

奇怪的是，还没有人对此提出完整的答案，嗯，就是这样。

解决方案一：明确：两者

添加样式为 clear:both 的块元素；到它上面将清除经过该点的浮动并阻止该元素的父元素折叠。http://jsfiddle.net/TVD2X/1/

优点：允许你清除一个元素，你在下面添加的元素不会受到上面的浮动元素和有效的 css 的影响。

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

注意：要回退到 IE6 并让它在禁欲的父母（即输入元素）上工作，您不能使用 :after。

解决方案二：显示：表格

添加显示：表格；给父母以使其摆脱浮动并以正确的高度显示。http://jsfiddle.net/h9GAZ/1/

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

缺点：需要无效的 css 以确保在 IE6 和 7 中一切正常。

注意：IE6 和 7 的宽度自动用于防止宽度为 100%+padding，在较新的浏览器中并非如此。

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

这些修复可以回溯到支持最低的浏览器，全球使用率超过 1% (IE6)，这意味着使用 :after 不会削减它。

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

设置高度确实“防止”了崩溃，但这不是一个正确的解决方法。

无效的 CSS

无效的 css 永远不会伤害任何人，事实上，它现在已成为常态。使用浏览器前缀与使用特定于浏览器的 hack 一样无效，并且不会影响最终用户。

综上所述

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

于 2012-10-17T13:38:07.867 回答
6

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

顺便说一句，我不会担心第四个解决方案是黑客。CSS 中的黑客攻击只有在其潜在行为受到重新解释或其他更改时才会有害。这样，您的 hack 将无法保证有效。但是在这种情况下，您的 hack 依赖于本overflow: auto应具有的确切行为。搭便车没有坏处。

于 2008-10-20T15:24:31.357 回答
5

我最喜欢的方法是为父元素使用 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-15T10:35:10.480 回答
4

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

它是这样的......

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

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

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

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

.cf:after {
    content: " ";
    display: table;
    clear: float;
}
于 2012-07-21T18:05:52.123 回答
3

在底部的父 div 中添加它

 <div style="clear:both"></div>
于 2014-07-01T18:06:25.680 回答
2

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

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

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

解决方案 3，添加一个间隔来清除浮动，就像在您的内容下方添加一个额外的行，并且也会与周围的元素混淆。如果您使用这种方法，您可能希望将 div 设置为高度：0px。

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

于 2013-03-29T16:09:32.223 回答
2

将溢出更改为autoor可能会发现的主要问题hidden是，所有内容都可以通过鼠标中键滚动，并且用户可能会弄​​乱整个站点布局。

于 2012-09-23T17:21:27.150 回答
0

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

原因如下：

1) :afterIE6/7 不支持选择器，FF3 不支持选择器，但是，
     如果您只关心 IE8+ 和 FF3.5+ 清除 :after 可能最适合您...

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

作者注意：清除没有什么技巧......清除意味着跳过浮动字段。自 HTML3 以来，CLEAR 就在我们身边（谁知道，可能更长）http://www.w3.org/MarkUp/html3/deflists.html，也许他们应该选择一个有点不同的名称，例如 page: new，但这只是一个细节...

于 2013-08-05T14:54:26.110 回答