我有一个twitter bootstrap的问题,对我来说有点奇怪。我有一个左侧固定的侧边栏和一个主要区域。
- <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清除。
问题是clearfix-div下面的内容被移动到低于边栏内容。
我为此做了一个小提琴:http://jsfiddle.net/ZguC7/
我通过将“overflow:collapse”设置为#main来解决问题,但是我不明白它,如果有人可以解释是什么导致这个问题,我会很高兴。
解决方法
clearfix应该包含浮动元素,但是在您的html中,只有在您右拉右侧之后才添加clearfix,所以您应该这样做:
- <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>
很高兴认识您通过设置溢出属性来解决问题。然而,这也是清除浮动的好主意。你漂浮了你的元素,你可以添加overflow:hidden;正如你在主要做的那样。