Clearfix mit twitter Bootstrap

Question

Ich habe ein Problem mit Twitter Bootstrap, die mir ein bisschen komisch aussieht. Ich habe eine Sidebar mit auf der linken Seite und einem Hauptbereich fixiert.

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

Im Hauptbereich ich einige Inhalte mit Pull-links haben und Pull-rechts mit von einem clearfix gelöscht wird.

Das Problem ist, dass der Inhalt unter dem Clearfix-Div verschoben wird, um niedriger als der Sidebar-Inhalt zu sein.

Ich habe eine Geige dafür: http://jsfiddle.net/ZguC7/

ich das Problem gelöst, indem Sie die Einstellung „Überlauf: Kollaps“ #main, aber ich nicht verstehen und würden uns sehr freuen, wenn jemand erklären kann, was dies verursacht Problem.

Answer 1

clearfix sollten die Schwimmelemente enthalten, aber in Ihrem HTML haben Sie clearfix nur hinzugefügt nach rechts schwebend, die Ihre pull-right ist so sollten Sie tun, wie folgt:

<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 Sie wissen, dass Sie das Problem gelöst haben, indem Sie Überlaufeigenschaften festgelegt haben. Dies ist jedoch auch eine gute Idee, um den Schwimmer zu löschen. Wo du deine Elemente schweben hast, könntest du overflow: hidden; hinzufügen, wie du es in deiner Hauptsache getan hast.