Clearfix with twitter bootstrap

Question

Tôi gặp vấn đề với trình khởi động twitter trông hơi lạ với tôi. Tôi có một thanh bên với cố định ở phía bên trái và một khu vực chính.

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

Bên trong khu vực chính tôi có một số nội dung với pull-trái và kéo-đúng với được xóa bởi một clearfix.

Vấn đề là nội dung bên dưới clearfix-div được chuyển xuống thấp hơn nội dung thanh bên.

tôi đã thực hiện một fiddle cho việc này: http://jsfiddle.net/ZguC7/

tôi giải quyết vấn đề bằng cách thiết lập "overflow: sự sụp đổ" để #main, nhưng tôi không hiểu nó và sẽ rất hạnh phúc nếu ai đó có thể giải thích những gì đang gây ra này vấn đề.

Answer 1

clearfix nên chứa các yếu tố nổi nhưng trong html của bạn, bạn đã thêm clearfix chỉ sau đúng đó là pull-right bạn nổi vì vậy bạn nên làm như thế này:

<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

---

Chúc mừng đến biết bạn đã giải quyết được vấn đề bằng cách thiết lập các thuộc tính tràn. Tuy nhiên đây cũng là ý tưởng tốt để xóa phao. Nơi bạn đã thả nổi các yếu tố của bạn, bạn có thể thêm overflow: hidden; như bạn đã làm trong chính của bạn.