Clearfix with twitter bootstrap [英] Clearfix with twitter bootstrap

问题描述

我有一个关于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，但我不明白它，如果有人能解释是什么导致这个问题，会很高兴。

< c> 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; ，就像你在主体中做的那样。

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.

<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.

The problem is that the content below the clearfix-div is moved to be lower than the sidebar-content.

I made a fiddle for this: 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.

解决方案

clearfix should contain the floating elements but in your html you have added clearfix only after floating right that is your pull-right so you should do like this:

<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>

see this demo

---

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.

这篇关于Clearfix with twitter bootstrap的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！