我有一个古老的问题,一个div包装两列布局。我的侧边栏是浮动的,所以我的容器div不能包装内容和侧边栏。
<div id="container">
<div id="content"></div>
<div id="sidebar"></div>
</div>
似乎有很多方法可以修复Firefox中的明显错误:
< br清楚= "所有" / >
溢出:汽车
隐藏溢出:
在我的情况下,唯一一个似乎正确工作的是<br clear="all"/>解决方案,这有点邋遢。溢出:auto给我讨厌的滚动条,溢出:隐藏肯定有副作用。
此外,IE7显然不应该因为它的错误行为而遭受这个问题,但在我的情况下,它遭受的问题和Firefox一样。
目前可用的哪种方法是最稳健的?
这是一个相当简洁的解决方案:
/* For modern browsers */
.cf:before,
.cf:after {
content:"";
display:table;
}
.cf:after {
clear:both;
}
/* For IE 6/7 (trigger hasLayout) */
.cf {
zoom:1;
}
它可以在Firefox 3.5+, Safari 4+, Chrome, Opera 9+, IE 6+中运行
包括:before选择器是不需要清除浮点数的,
但它可以防止现代浏览器的页边距崩溃。这
确保在缩放:1时与IE 6/7的视觉一致性
应用。
从http://nicolasgallagher.com/micro-clearfix-hack/
如果浮动容器有父元素,在ie6中使用overflow:hidden/auto和height就足够了。
#测试中的任何一个都可以工作,下面所述的HTML可以清除浮动。
#test {
overflow:hidden; // or auto;
_height:1%; forces hasLayout in IE6
}
<div id="test">
<div style="floatLeft"></div>
<div style="random"></div>
</div>
如果这在ie6中不能正常工作,只需要浮动父节点来清除浮动。
#test {
float: left; // using float to clear float
width: 99%;
}
从来没有真正需要任何其他类型的清理。也许是我编写HTML的方式。
这是一个相当简洁的解决方案:
/* For modern browsers */
.cf:before,
.cf:after {
content:"";
display:table;
}
.cf:after {
clear:both;
}
/* For IE 6/7 (trigger hasLayout) */
.cf {
zoom:1;
}
它可以在Firefox 3.5+, Safari 4+, Chrome, Opera 9+, IE 6+中运行
包括:before选择器是不需要清除浮点数的,
但它可以防止现代浏览器的页边距崩溃。这
确保在缩放:1时与IE 6/7的视觉一致性
应用。
从http://nicolasgallagher.com/micro-clearfix-hack/