我有一个古老的问题,一个div包装两列布局。我的侧边栏是浮动的,所以我的容器div不能包装内容和侧边栏。
<div id="container">
<div id="content"></div>
<div id="sidebar"></div>
</div>
似乎有很多方法可以修复Firefox中的明显错误:
< br清楚= "所有" / >
溢出:汽车
隐藏溢出:
在我的情况下,唯一一个似乎正确工作的是<br clear="all"/>解决方案,这有点邋遢。溢出:auto给我讨厌的滚动条,溢出:隐藏肯定有副作用。
此外,IE7显然不应该因为它的错误行为而遭受这个问题,但在我的情况下,它遭受的问题和Firefox一样。
目前可用的哪种方法是最稳健的?
与其他clearfix不同,这是一个没有容器的开放式clearfix
其他清除操作要么要求被浮动元素位于标记良好的容器中,要么需要额外的语义上为空的<div>。相反,明确分离内容和标记需要严格的CSS解决方案来解决这个问题。
仅仅因为需要标记浮点数的结尾,就不允许进行无人值守的CSS排版。
如果后者是你的目标,浮点数应该对任何围绕它的东西(段落、有序和无序列表等)保持开放,直到遇到“clearfix”。例如,clearfix可以通过一个新标题来设置。
这就是为什么我使用以下clearfix与新标题:
h1 {
clear: both;
display: inline-block;
width: 100%;
}
这个解决方案在我的网站上被广泛使用,以解决以下问题:浮动的微型对象旁边的文本很短,下一个清除对象的上边距不受尊重。
它还可以防止从站点自动生成pdf时的任何人工干预。
这是一个示例页面。