css - w3schools - Clearfix con twitter bootstrap

main clearfix

Question

Tengo un problema con Twitter bootstrap que me parece un poco extraño. Tengo una barra lateral con fijo en el lado izquierdo y un á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 del área principal tengo algo de contenido con pull-left y pull-right con un clearfix.

El problema es que el contenido debajo de clearfix-div se mueve para ser más bajo que el contenido de la barra lateral.

Hice un violín para esto: http://jsfiddle.net/ZguC7/

Resolví el problema estableciendo el "desbordamiento: colapsar" en #principal, pero no lo entiendo y sería muy feliz si alguien puede explicar qué está causando este problema.

Answer 1

clearfix debe contener los elementos flotantes pero en tu html has agregado clearfix solo después de flotar a la derecha que es tu pull-right así que deberías hacer esto:

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

ver esta demostración

Feliz de saber que resolvió el problema estableciendo propiedades de desbordamiento. Sin embargo, esta también es una buena idea para limpiar el flotador. Donde haya flotado sus elementos, podría agregar overflow: hidden; como lo has hecho en tu principal.