你如何防止浮动元素的父母崩溃?
虽然像 <div> 这样的元素通常会增长以适应其内容，但使用 float 属性可能会给 CSS 新手带来一个令人吃惊的问题:如果浮动元素有非浮动的父元素，父元素会折叠.
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.
例如:
<div>
<div style="float: left;">Div 1</div>
<div style="float: left;">Div 2</div>
</div>本示例中的父 div 将不展开以包含其浮动的子元素 - 它似乎具有 height: 0.
The parent div in this example will not expand to contain its floated children - it will appear to have height: 0.
我想在这里创建一个详尽的解决方案列表.如果您知道跨浏览器兼容性问题，请指出.
浮动父级.
<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?
给父母一个明确的高度.
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.
添加一个spacer"；父元素内的元素，像这样:
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>优点:代码简单.
缺点:没有语义；间隔 div 仅作为布局技巧存在.
Pros: Straightforward to code.
Cons: Not semantic; the spacer div exists only as a layout hack.
将父级设置为 overflow: auto.
<div style="overflow: auto;">
<div style="float: left;">Div 1</div>
<div style="float: left;">Div 2</div>
</div>优点:不需要额外的 div.
缺点:看起来像一个 hack - 这不是 overflow 属性的既定目的.
Pros: Doesn't require extra div.
Cons: Seems like a hack - that's not the overflow property's stated purpose.
推荐答案
解决方案一:
最可靠和不引人注目的方法似乎是这样的:
Solution 1:
The most reliable and unobtrusive method appears to be this:
演示: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 添加一个类.
With a little CSS targeting, you don't even need to add a class to the parent DIV.
此解决方案向后兼容 IE8，因此您无需担心旧版浏览器会出现故障.
This solution is backward compatible with IE8 so you don't need to worry about older browsers failing.
已建议对解决方案 1 进行修改，如下所示:
An adaptation of solution 1 has been suggested and is as follows:
演示: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，但未经测试.
This solution appears to be backward compatible to IE5.5 but is untested.
也可以设置 display: inline-block; 和 width: 100%; 来模拟正常的块元素而不折叠.
It's also possible to set display: inline-block; and width: 100%; to emulate a normal block element while not collapsing.
演示:http://jsfiddle.net/SO_AMK/ae5ey/
CSS:
.clearfix {
display: inline-block;
width: 100%;
}
这个解决方案应该向后兼容 IE5.5，但只在 IE6 中测试过.
This solution should be backward compatible with IE5.5 but has only been tested in IE6.
相关文章