Clearfix z twitter bootstrap

Question

Mam problem z twitter bootstrap, który wygląda trochę dziwnie dla mnie. Mam pasek boczny z ustalonym po lewej stronie i głównym obszarem.

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

Wewnątrz głównego obszaru mam pewne treści z rozwijanego po lewej i prawej stronie z pociągowy jest wyczyszczone przez clearfix.

Problem polega na tym, że zawartość poniżej parametru clearfix-div zostanie przesunięta do poziomu niższego niż zawartość paska bocznego.

Zrobiłem skrzypce dla tego: http://jsfiddle.net/ZguC7/

I rozwiązać problem poprzez ustawienie „overflow: upadek” do #main, ale ja nie rozumiem go i byłby bardzo szczęśliwy, jeśli ktoś może wyjaśnić, co jest przyczyną tego kwestia.

Answer 1

clearfix powinien zawierać elementy pływające, ale w HTML dodałeś clearfix dopiero po pływających prawo to jest twój pull-right więc należy zrobić tak:

<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

---

Szczęśliwy wiesz, że rozwiązałeś problem, ustawiając właściwości przepełnienia. Jednak jest to również dobry pomysł, aby usunąć float. Tam, gdzie unosiłeś swoje elementy, możesz dodać overflow: hidden;, tak jak to zrobiłeś w swoim main.