您如何防止浮动元素的父项崩溃？ [重复]

【推荐】2019 Java 开发者跳槽指南.pdf(吐血整理) >>>

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

我可以使用哪些“ clearfix”方法？ （29个答案）

4年前关闭。

尽管<div>的元素通常会增长以适应其内容，但是使用float属性可能会给 CSS新手带来一个惊人的问题： 如果 float 元素具有非 float 父元素，则父元素会折叠。

例如：

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

优点 ：直接编写代码。
缺点 ：没有语义； spacer 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。
缺点 ：好像是hack-这不是overflow属性的既定目的。

评论？ 还有其他建议吗？

---

#1楼

最知名的解决方案之一是您的解决方案编号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;
}

---

#2楼

解决方案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定位，您甚至不需要向父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中进行了测试。

---

#3楼

将溢出更改为auto或hidden可能会发现的主要问题是，使用鼠标中键可以使所有内容滚动并可让用户弄乱整个网站布局。

---

#4楼

奇怪的是，还没有人给出一个完整的答案，嗯，好吧。

解决方案一： 明确：两者

添加样式元素clear：both; 它将清除经过该点的浮动对象，并阻止该元素的父对象崩溃。 http://jsfiddle.net/TVD2X/1/

优点：允许您清除元素，并且在下面添加的元素不会受到上方浮动元素和有效CSS的影响。

缺点：需要使用另一个标签来清除浮标，浮标。

注意：要回退到IE6并使其在节制的父母（即输入元素）上工作，您将无法使用：after。

解决方法二： 显示：表格

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

优点：没有额外的标记，而且整洁了很多。 在IE6 +中可用

缺点：需要使用无效的CSS才能确保IE6和7中的所有功能都能正常运行。

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

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

这些修复程序可用于支持最低的浏览器，全球使用率超过1％（IE6），这意味着使用：after不会削减它。

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

设置高度可以“防止”塌陷，但这不是适当的解决方法。

无效的CSS

无效的CSS永远不会伤害任何人，实际上，现在这已成为常态。 使用浏览器前缀与使用浏览器特定的技巧一样无效，并且不会对最终用户造成任何影响。

结论

我使用上述两种解决方案来使元素正确反应并彼此很好地玩耍，恳请您做同样的事情。

---

#5楼

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

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

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

解决方案3，添加间隔符以清除浮动，就像在内容下方添加额外的一行，并且也会与周围的元素造成混乱。 如果使用此方法，则可能要将div设置为height：0px。

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

来源：oschina

链接：https://my.oschina.net/stackoom/blog/3142913