我有一个twitter引导程序的问题,看起来有点奇怪。
<div>
<div id="sidebar">
<ul>
<li>A</li>
<li>A</li>
<li>C</li>
<li>D</li>
<li>E</li>
<li>F</li>
<li>...</li>
<li>Z</li>
</ul>
</div>
<div id="main">
<div class="clearfix">
<div class="pull-right">
<a>RIGHT</a>
</div>
</div>
<div>MOVED BELOW Z</div>
</div>
#sidebar {
background: red;
float: left;
width: 100px;
}
#main {
background: green;
margin-left: 150px;
overflow: hidden;
}
在主区域内,我对向左拉和向右拉有一些满足感。它被clearfix清除。
问题是clearfixdiv下面的内容被移动到低于侧边栏内容的位置。
我为此做了一把小提琴:http://jsfiddle.net/ZguC7/
我通过将"overflow:collapse"设置为#main来解决这个问题,但我不理解,如果有人能解释是什么导致了这个问题,我会很高兴。
clearfix
应该包含浮动元素,但在html中,您只在浮动后添加了clearfix
,即pull-right
,因此您应该这样做:
<div class="clearfix">
<div id="sidebar">
<ul>
<li>A</li>
<li>A</li>
<li>C</li>
<li>D</li>
<li>E</li>
<li>F</li>
<li>...</li>
<li>Z</li>
</ul>
</div>
<div id="main">
<div>
<div class="pull-right">
<a>RIGHT</a>
</div>
</div>
<div>MOVED BELOW Z</div>
</div>
看这个演示
很高兴知道您通过设置溢出属性解决了这个问题。然而,这也是清除浮动的好主意。在浮动元素的地方,可以像在main中那样添加overflow: hidden;
。