CSS Clearfix 与 Twitter 引导程序
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/18630587/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Clearfix with twitter bootstrap
提问by SebastianStehle
I have an issue with twitter bootstrap that looks a little bit strange to me. I have a sidebar with fixed with at the left side and a main area.
我对 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;
}
Inside the main area I have some content with pull-left and pull-right with is cleared by a clearfix.
在主要区域内，我有一些内容与 pull-left 和 pull-right with 被清除修复清除。
The problem is that the content below the clearfix-div is moved to be lower than the sidebar-content.
问题是 clearfix-div 下方的内容被移动到低于侧边栏内容。
I made a fiddle for this: http://jsfiddle.net/ZguC7/
我为此做了一个小提琴：http: //jsfiddle.net/ZguC7/
I solved the problem by setting the "overflow: collapse" to #main, but I dont understand it and would be very happy if somebody can explain what is causing this issue.
我通过将“溢出：崩溃”设置为#main 解决了这个问题，但我不明白，如果有人能解释导致这个问题的原因，我会很高兴。
回答by Bhojendra Rauniyar
clearfixshould contain the floating elements but in your html you have added clearfixonly after floating right that is your pull-rightso you should do like this:
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>
Happy to know you solved the problem by setting overflow properties. However this is also good idea to clear the float. Where you have floated your elements you could add overflow: hidden;as you have done in your main.
很高兴知道您通过设置溢出属性解决了问题。然而，这也是清除浮动的好主意。在您浮动元素的地方，您可以overflow: hidden;像在 main.js 中所做的那样添加。
