web-dev-qa-db-fra.com

Clearfix avec Twitter bootstrap

J'ai un problème avec Twitter bootstrap) qui me semble un peu étrange. J'ai une barre latérale fixe avec à gauche et une zone principale.

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

À l'intérieur de la zone principale, j'ai un contenu avec pull-left et pull-right avec effacé par un clearfix.

Le problème est que le contenu en dessous de clearfix-div est déplacé pour être inférieur au contenu de la barre latérale.

J'ai fait un violon pour ça: http://jsfiddle.net/ZguC7/

J'ai résolu le problème en réglant le paramètre "overflow: collapse" sur #main, mais je ne le comprends pas et je serais très heureux si quelqu'un pouvait expliquer la cause de ce problème.

csstwitter-bootstrap-3clearfix
27
SebastianStehle

clearfix devrait contenir les éléments flottants, mais dans votre code HTML vous avez ajouté clearfix seulement après avoir flotté à droite, votre pull-right donc vous devriez faire comme ceci:

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

voir cette démo

Heureux de savoir que vous avez résolu le problème en définissant des propriétés de débordement. Cependant, c’est aussi une bonne idée de vider le flotteur. Si vous avez flotté vos éléments, vous pouvez ajouter overflow: hidden; comme vous l'avez fait dans votre main.

39
Bhojendra Rauniyar