Clearfix con bootstrap twitter

Question

Ho un problema con il bootstrap di Twitter che mi sembra un po 'strano. Ho una barra laterale con fissa sul lato sinistro e un'area principale.

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

All'interno dell'area principale che ho alcuni contenuti con pull-sinistra e tirare a destra con può essere eliminato per un clearfix.

Il problema è che il contenuto sotto il clearfix-div viene spostato per essere inferiore al contenuto della barra laterale.

Ho fatto un violino per questo: http://jsfiddle.net/ZguC7/

ho risolto il problema impostando il "troppo pieno: collasso" per #main, ma io non capire e sarebbe molto felice se qualcuno può spiegare che cosa sta causando questo problema.

Answer 1

clearfix deve contenere gli elementi galleggianti, ma nel tuo html si hanno aggiunto clearfix solo dopo a destra che è la tua pull-right galleggiante così si dovrebbe fare in questo modo:

<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

---

Felice di sai che hai risolto il problema impostando le proprietà di overflow. Tuttavia questa è anche una buona idea per cancellare il galleggiante. Dove hai fluttuato i tuoi elementi puoi aggiungere overflow: hidden; come hai fatto nella tua principale.