Clearfix with twitter bootstrap

Question

私は少し奇妙に見えるtwitterブートストラップに問題があります。私は、左側にメインエリアを固定したサイドバーを持っています。私はclearfixでクリアされると、プル左と右のプルといくつかのコンテンツを持っている主なエリア内

#sidebar { 
    background: red; 
    float: left; 
    width: 100px; 
} 

#main { 
    background: green; 
    margin-left: 150px; 
    overflow: hidden; 
} 

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

。

問題は、clearfix-div以下のコンテンツがサイドバーコンテンツよりも下に移動することです。

私は、このためにバイオリンを作った：http://jsfiddle.net/ZguC7/

私が設定することで、問題を解決し、「オーバーフロー：崩壊」#mainするが、私はそれを理解しないと誰かがこれを引き起こしているかを説明できるかどうかは非常に幸せになります問題。

Answer 1

clearfix浮動要素が含まれている必要がありますが、あなたのhtmlであなただけのpull-rightあるので、あなたがこのようにすればいいのフローティング直後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> 

see this demo

---

にハッピーオーバーフローのプロパティを設定して問題を解決したことをご存じですか？しかし、これもフロートをクリアするための良いアイデアです。あなたの要素を浮かべているところでは、あなたがメインで行ったようにoverflow: hidden;を追加することができます。