虽然<div>这样的元素通常会增长以适应其内容，但使用float属性可能会给CSS新手带来一个惊人的问题:如果浮动元素具有非浮动的父元素，父元素将会折叠。
例如:
< div >
< span style=" font - family:宋体;"> Div 1 < / Div >
< span style=" font - family:宋体;"2 > Div < / Div >
< / div >
本例中的父div不会展开以包含它的浮动子div——它看起来高度为:0。
你如何解决这个问题?
我想在这里创建一个详尽的解决方案列表。如果您知道跨浏览器兼容性问题，请指出来。
解决方案1
浮动父节点。
< span style=" font - family:宋体;">
< span style=" font - family:宋体;"> Div 1 < / Div >
< span style=" font - family:宋体;"2 > Div < / Div >
< / div >
优点:语义代码。
缺点:你可能不总是希望父元素浮动。即使你这样做了，你是否浮动了父母的父母等等?必须浮动每个祖先元素吗?
解决方案2
给父节点一个明确的高度。
< span style=" font - family:宋体;>
< span style=" font - family:宋体;"> Div 1 < / Div >
< span style=" font - family:宋体;"2 > Div < / 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仅作为布局hack存在。
解决方案4
将parent设置为overflow: auto。
< span style=" font - family:宋体;">
< span style=" font - family:宋体;"> Div 1 < / Div >
< span style=" font - family:宋体;"2 > Div < / Div >
< / div >
优点:不需要额外的div。
缺点:看起来像一个黑客-这不是溢出属性的声明的目的。
评论?其他建议吗?
解决方案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;宽度:100%;在不折叠的情况下模拟一个正常的块元素。
演示:http://jsfiddle.net/SO_AMK/ae5ey/
CSS:
.clearfix {
display: inline-block;
width: 100%;
}
该解决方案应该向后兼容IE5.5，但只在IE6中进行了测试。
奇怪的是，还没有人提出一个完整的答案，啊，好吧，就是这样。
解决方案一:明确:两者都有
添加一个block元素，样式为clear:both;on它将清除经过该点的浮点数，并阻止该元素的父元素折叠。http://jsfiddle.net/TVD2X/1/
优点:允许你清除一个元素，你在下面添加的元素不会被上面的浮动元素和有效的css影响。
缺点:需要另一个标记来清除浮动，膨胀的标记。
注意:回到IE6，让它在禁欲的父母(即输入元素)上工作，你不能使用:after。
解决方案二:显示:表
添加显示:表;到父节点，使它摆脱浮动并显示正确的高度。http://jsfiddle.net/h9GAZ/1/
优点:没有额外的标记，更整洁。支持IE6+
缺点:需要无效的css来确保在IE6和7中一切都很好。
注意:IE6和ie7 width auto用于防止宽度为100%+填充，这在新浏览器中不是这样的。
关于其他“解决方案”的说明
这些修复可以回溯到最低支持的浏览器，全球使用率超过1% (IE6)，这意味着使用:after并不能解决问题。
溢出隐藏显示内容，但不防止元素折叠，因此不回答问题。使用内联块可能会有错误的结果，孩子有奇怪的边距等等，表要好得多。
设置高度确实“防止”了坍塌，但这不是一个合适的解决办法。
无效的css
无效的css不会伤害任何人，事实上，它现在是常态。使用浏览器前缀就像使用浏览器特定的黑客一样无效，并且不会影响最终用户。
总之
我使用上述两种解决方案来使元素正确地反应并彼此良好地发挥作用，我恳求你也这样做。
