你如何阻止浮动元素的父母崩溃？
尽pipe像<div>这样的元素通常会增长以适合其内容，但是使用float属性会给 CSS新手带来惊人的问题： 如果浮动元素具有非浮动的父元素，则父元素将会崩溃。
例如：
<div> <div style="float: left;">Div 1</div> <div style="float: left;">Div 2</div> </div>
在这个例子中的父div 不会展开来包含其浮动的孩子 – 它将显示有height: 0 。
你如何解决这个问题？
我想在这里创build一个详尽的解决scheme列表。 如果您知道跨浏览器兼容性问题，请将其指出。
解决scheme1
浮动父。
<div style="float: left;"> <div style="float: left;">Div 1</div> <div style="float: left;">Div 2</div> </div>
优点 ：语义代码。
缺点 ：你可能并不总是希望父项被浮动。 即使你这样做，你是否会浮动父母的父母，等等？ 你必须浮动每一个祖先的元素？
解决scheme2
给父母一个明确的高度。
<div style="height: 300px;"> <div style="float: left;">Div 1</div> <div style="float: left;">Div 2</div> </div>
优点 ：语义代码。
缺点 ：不灵活 – 如果内容改变或浏览器被resize，布局将会中断。
解决scheme3
在父元素内附加一个“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只作为布局破解而存在。
解决scheme4
设置父级overflow: auto 。
<div style="overflow: auto;"> <div style="float: left;">Div 1</div> <div style="float: left;">Div 2</div> </div>
优点 ：不需要额外的div。
缺点 ：看起来像一个黑客 – 这不是overflow财产的既定目的。
注释？ 其他build议？
解决scheme1：
最可靠和不引人注目的方法似乎是这样的：
演示： 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 。
这个解决scheme向后兼容IE8，所以你不必担心旧的浏览器失败。
解决scheme2：
已经build议对解决scheme1进行调整，如下所示：
演示： 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; }
该解决scheme似乎向后兼容IE5.5，但未经testing。
解决scheme3：
也可以设置display: inline-block; 和width: 100%; 模仿正常的块元素，而不崩溃。
演示： http : //jsfiddle.net/SO_AMK/ae5ey/
CSS：
.clearfix { display: inline-block; width: 100%; }
这个解决scheme应该向后兼容IE5.5，但只在IE6中testing过。
我通常使用的overflow: auto技巧; 尽pipe这严格来说不是严格意义上的溢出用途，但它有点相关 – 当然，足以使它容易记住。 在这个例子中， float: left的含义已经被扩展到各种用途，比IMO溢出更多。
当一个浮动元素位于一个容器框中时，问题发生，该元素不会自动强制容器的高度调整到浮动元素。 当一个元素被浮动时，它的父元素不再包含它，因为浮动元素被从stream中移除。 你可以使用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%; }
示范:)
而不是把overflow:auto放在父母上，把overflow:hidden
我为任何网页写的第一个CSS总是：
div { overflow:hidden; }
那我就不用担心了
虽然代码不是完美的语义，但是我认为在每个带有浮动内容的容器的底部都有一个我称之为“清除div”的方法更为直接。 事实上，我已经在每个项目的重置块中包含以下样式规则：
.clear { clear: both; }
如果你是IE6的样式（上帝帮助你），你可能想给这个规则一个0px行高和高度。
理想的解决scheme是使用行inline-block而不是浮动。 我认为浏览器的支持是相当不错的，如果你遵循（a）只适用于inline-block （通常是内联）的元素; 和（b）为Firefox添加-moz-inline-box 。
在FF2中检查你的页面，因为当嵌套某些元素时，我遇到了很多问题（令人惊讶的是，这是IE比FF更好的情况）。
有几个版本的clearfix， Nicolas Gallagher和Thierry Koblentz是主要作者。
如果你想支持旧版本的浏览器，最好使用这个clearfix：
.clearfix:before, .clearfix:after { content: ""; display: table; } .clearfix:after { clear: both; } .clearfix { *zoom: 1; }
在SCSS中，您应该使用以下技术：
%clearfix { &:before, &:after { content:" "; display:table; } &:after { clear:both; } & { *zoom:1; } } #clearfixedelement { @extend %clearfix; }
如果您不关心对旧版浏览器的支持，则会有一个较短的版本：
.clearfix:after { content:""; display:table; clear:both; }
奇怪的是，没有人为此提出完整的答案，嗯，在这里呢。
解决scheme一： 明确：两者
添加样式为clear的块元素：both; 在它上面将清除那个点的浮游物并且停止那个元素的母亲崩溃。 http://jsfiddle.net/TVD2X/1/
优点：允许你清除一个元素，下面添加的元素不会受到上面浮动的元素和有效的CSS的影响。
缺点：需要另一个标签来清除浮动，膨胀标记。
注意：要回退到IE6，并为它在无效的父母（即input元素）上工作，你不能使用：之后。
解决scheme二： 显示：表格
添加显示：表格; 让父母摆脱浮游物并以正确的身高显示。 http://jsfiddle.net/h9GAZ/1/
优点：没有额外的标记，是一个很好的整洁。 适用于IE6 +
缺点：需要无效的CSS，以确保在IE6和7中一切都很好。
注意：IE6和7宽度自动用于防止宽度为100％+填充，而在较新的浏览器中则不是这种情况。
关于其他“解决scheme”的说明
这些修复程序可以回到最低支持的浏览器，全球使用率超过1％（IE6），这意味着使用：after不会削减。
隐藏溢出不显示内容，但不阻止元素崩溃，所以不回答问题。 使用内联块可能会出现错误的结果，孩子有奇怪的边缘等等，表格要好得多。
设置高度确实“防止”崩溃，但它不是一个适当的修复。
无效的CSS
无效的CSS从来没有伤害任何人，实际上，现在是规范。 使用浏览器前缀与使用浏览器特定的黑客一样无效，并不会影响最终用户。
结论是
我使用上述两个解决scheme来使元素正确地反应并且彼此很好地发挥，我恳求你也这样做。
我在适用的情况下使用2和4（即当我知道内容的高度或溢出不会造成伤害时）。 其他任何地方，我都会select解决scheme3.顺便说一下，您的第一个解决scheme没有3（我可以发现）的优势，因为它使用相同的虚拟元素，因此它不再具有语义。
顺便说一下，我不会担心第四个解决scheme是黑客。 CSS中的黑客只有在其基本行为受到重新解释或其他更改时才会受到伤害。 这样，你的黑客就不能保证工作。 然而，在这种情况下，你的黑客依赖于overflow: auto的确切行为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; }
其中一个最着名的解决scheme是使用伪元素而不是非语义html元素的解决scheme3的变体。
它是这样的…
.cf:after { content: " "; display: block; visibility: hidden; height: 0; clear: both; }
你把它放在你的样式表中，而你所需要的就是把类“cf”join到包含浮点数的元素中。
我使用的是来自Nicolas Gallagher的另一种变化。
它做同样的事情，但它更短，看起来更整洁，也许用来完成另一个非常有用的事情 – 防止子元素的边缘与父母的边缘崩溃（但是，你需要别的东西 – 阅读更多关于它这里http://nicolas.google.com/micro-clearfix-hack/ ）。
.cf:after { content: " "; display: table; clear: float; }
将溢出更改为auto或hidden的主要问题是，所有内容都可以通过鼠标中键滚动，用户可以将整个网站布局搞乱。
我认为另一个可能的解决scheme是更正确的是将浮动的内部元素更改为“display：inline”。 这个例子，当我遇到这个页面时，我正在使用的浮动div的使用方式与使用跨度的方式完全相同。 而不是使用div，切换到span，或者如果您使用默认的“display：block”而不是“display：inline”的另一个元素，则将其更改为“display：inline”。 我相信这是100％的语义正确的解决scheme。
解决scheme1，浮动父，本质上是改变整个文件被浮动。
解决scheme2，设置一个明确的高度，就像画一个盒子，说我想在这里画一个图片，即使用这个，如果你正在做一个img标签。
解决scheme3，添加一个间隔，以清除浮动，就像在你的内容下面添加一个额外的行，也会混淆周围的元素。 如果你使用这种方法，你可能想把div设置为height：0px。
解决scheme4，溢出：汽车，承认你不知道如何布局文件，你承认你不知道该怎么做。
也许这个简单的例子有用： https ： //github.com/imammubin/Simple-Example-Slideshow-Responsive-Layout
添加这个在底部的父div
<div style="clear:both"></div>
我相信最好的办法就是clear:both即将到来的元素。
原因如下：
1） :after在IE6 / 7和FF3中不支持select器:after ，
如果你只关心IE8 +和FF3.5 +清除：以后可能是最适合你的…
2） overflow应该做别的东西，所以这个黑客是不够可靠的。
给作者的提示：在清理方面没有什么不妥之处。清除意味着跳过浮动域。 CLEAR与我们自HTML3（谁知道，也许甚至更长） http://www.w3.org/MarkUp/html3/deflists.html ，也许他们应该select一个不同的名称，如页：新，但这只是一个细节…
