Eu tenho um problema com o bootstrap twitter que parece um pouco estranho para mim. Eu tenho uma barra lateral com o lado esquerdo e uma área principal.

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

Dentro da área principal eu tenho algum conteúdo com pull-left e pull-right com é limpo por um clearfix.

O problema é que o conteúdo abaixo do clearfix-div é movido para ser menor que o conteúdo da barra lateral.

Eu fiz um violino para isso:http://jsfiddle.net/ZguC7/

Eu resolvi o problema definindo o "estouro: colapso" para #main, mas eu não entendo e ficaria muito feliz se alguém pudesse explicar o que está causando esse problema.