你如何让父母的浮动元素不崩溃？ [英] How do you keep parents of floated elements from collapsing?
问题描述
虽然< div> 的元素通常会增长以适合其内容，但使用 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>
优点：语义代码。
Cons ：您可能不总是希望父浮动。即使你做，你浮动父母的父母，等等吗？
解决方案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 =spacerstyle =clear：both;>< / div>
< / div>
优点：直接编码。
Cons ：不是语义;
解决方案4
将父项设置为 overflow：auto 。
< div style =overflow：auto;>
< div style =float：left;> Div 1< / div>
< div style =float：left;> Div 2< / div>
< / div>
优点：不需要额外的div。
缺点：看起来像一个黑客 - 这不是溢出属性的声明目的。
< h1>评论？其他建议？
解决方案1：
unobtrusive方法似乎是这样：
演示： 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进行修改，如下： / p>
演示： 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，但未经测试。 / p>
解决方案3：
也可以设置 display：inline-block; / code>和 width：100％; 可模仿正常的块元素，但不会折叠。
演示： http://jsfiddle.net/SO_AMK/ae5ey/
CSS：
.clearfix {
display：inline-block;
width：100％;
}
此解决方案应向后兼容IE5.5， IE6。
Although elements like <div>s normally grow to fit their contents, using the float property can cause a startling problem for CSS newbies: if floated elements have non-floated parent elements, the parent will collapse.
For example:
<div>
<div style="float: left;">Div 1</div>
<div style="float: left;">Div 2</div>
</div>
The parent div in this example will not expand to contain its floated children - it will appear to have height: 0.
How do you solve this problem?
I would like to create an exhaustive list of solutions here. If you're aware of cross-browser compatibility issues, please point them out.
Solution 1
Float the parent.
<div style="float: left;">
<div style="float: left;">Div 1</div>
<div style="float: left;">Div 2</div>
</div>
Pros: Semantic code.
Cons: You may not always want the parent floated. Even if you do, do you float the parents' parent, and so on? Must you float every ancestor element?
Solution 2
Give the parent an explicit height.
<div style="height: 300px;">
<div style="float: left;">Div 1</div>
<div style="float: left;">Div 2</div>
</div>
Pros: Semantic code.
Cons: Not flexible - if the content changes or the browser is resized, the layout will break.
Solution 3
Append a "spacer" element inside the parent element, like this:
<div>
<div style="float: left;">Div 1</div>
<div style="float: left;">Div 2</div>
<div class="spacer" style="clear: both;"></div>
</div>
Pros: Straightforward to code.
Cons: Not semantic; the spacer div exists only as a layout hack.
Solution 4
Set parent to overflow: auto.
<div style="overflow: auto;">
<div style="float: left;">Div 1</div>
<div style="float: left;">Div 2</div>
</div>
Pros: Doesn't require extra div.
Cons: Seems like a hack - that's not the overflow property's stated purpose.
Comments? Other suggestions?
Solution 1:
The most reliable and unobtrusive method appears to be this:
Demo: 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;
}
With a little CSS targeting you don't even need to add a class to the parent DIV.
This solution is backwards compatible to IE8 so you don't need to worry about older browsers failing.
Solution 2:
An adaptation on solution 1 has been suggested and is as follows:
Demo: 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;
}
This solution appears to be backwards compatible to IE5.5 but is untested.
Solution 3:
It's also possible to set display: inline-block; and width: 100%; to emulate a normal block element while not collapsing.
Demo: http://jsfiddle.net/SO_AMK/ae5ey/
CSS:
.clearfix {
display: inline-block;
width: 100%;
}
This solution should be backwards compatible to IE5.5 but has only been tested in IE6.
这篇关于你如何让父母的浮动元素不崩溃？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
