你如何防止浮动元素的父元素崩溃? [英] How do you keep parents of floated elements from collapsing?
问题描述
尽管像
float 属性可能会给 CSS 新手带来一个令人吃惊的问题:如果浮动元素有非浮动的父元素，父元素会崩溃.例如:
<div style="float: left;">Div 1</div><div style="float: left;">Div 2</div>本示例中的父 div 将不会扩展以包含其浮动子级 - 它看起来具有 height: 0.
你是如何解决这个问题的?
我想在这里创建一个详尽的解决方案列表.如果您知道跨浏览器兼容性问题，请指出.
解决方案 1
浮动父级.
<div style="float: left;">Div 1</div><div style="float: left;">Div 2</div>优点:语义代码.
缺点:您可能并不总是希望父浮动.即使你这样做，你是否浮动父母的父母，等等?你必须浮动每个祖先元素吗?
解决方案 2
给父母一个明确的高度.
<div style="float: left;">Div 1</div><div style="float: left;">Div 2</div>优点:语义代码.
缺点:不灵活 - 如果内容更改或浏览器调整大小，布局会中断.
解决方案 3
附加一个spacer"父元素内的元素，像这样:
<div style="float: left;">Div 1</div><div style="float: left;">Div 2</div><div class="spacer" style="clear: both;"></div>优点:代码简单.
缺点:没有语义；间隔 div 仅作为布局技巧存在.
解决方案 4
设置父级为overflow: auto.
<div style="overflow: auto;"><div style="float: left;">Div 1</div><div style="float: left;">Div 2</div>优点:不需要额外的 div.
缺点:看起来像一个黑客 - 这不是 overflow 属性的声明目的.
评论?其他建议?
解决方案 1:
最可靠和不引人注目的方法似乎是这样的:
演示:http://jsfiddle.net/SO_AMK/wXaEH/
HTML:
<div style="float: left;">Div 1</div><div style="float: left;">Div 2</div></div>CSS:
.clearfix::after {内容: " ";显示:块；高度:0；清楚:两者；}
通过一些 CSS 定位，您甚至不需要向父 DIV 添加一个类.
此解决方案向后兼容 IE8，因此您无需担心旧浏览器会失败.
解决方案 2:
已建议对解决方案 1 进行修改，如下所示:
演示:http://jsfiddle.net/wXaEH/162/
HTML:
<div style="float: left;">Div 1</div><div style="float: left;">Div 2</div></div>CSS:
.clearfix::after {内容: " ";显示:块；高度:0；清楚:两者；*zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML += '<div class="ie7-clear"></div>' );}.ie7-清除{显示:块；清楚:两者；}
此解决方案似乎向后兼容 IE5.5，但未经测试.
解决方案 3:
也可以设置 display: inline-block; 和 width: 100%; 来模拟普通块元素而不折叠.
演示:http://jsfiddle.net/SO_AMK/ae5ey/
CSS:
.clearfix {显示:内联块；宽度: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 backward compatible with IE8 so you don't need to worry about older browsers failing.
Solution 2:
An adaptation of 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 backward 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 backward compatible with IE5.5 but has only been tested in IE6.
这篇关于你如何防止浮动元素的父元素崩溃?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
