Clearfix with twitter bootstrap

Question

나에게 이상한 트위터 부트 스트랩에 문제가 있습니다. 왼쪽과 메인 영역에 고정 된 사이드 바를 가지고 있습니다. 나는 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;을 추가 할 수 있습니다.