Question

<div style="float:left;">
    column 1
</div>
<div style="float:left;">
    column 2
</div>
<div style="clear:both;"></div>

Je suis habitué à l'écriture clear:both. Mais j'ai entendu sur Twitter Bootstrap il y a quelque chose appelé « clearfix »? Sur quel élément est / ce que j'apply "clearfix"?

Était-ce utile?

La solution

en utilisant CSS, vous pouvez simplement utiliser le après psudeo

.class1:after, .class2:after //append as many as you like
{
 clear:both;
 *zoom:1;
 height:0;
 visibility: hidden;
 display:block;
}

alternative(providing children are not using the position selector)
(parent-elemts){overflow:hidden;}//bit of a quick fix!

garder le balisage indésirable de votre fichier html

Edit: Pardon! pour une raison quelconque le bouton bouton commentaire Ajouter ou upvote ne fonctionne pas pour moi ce soir.

Pour ajouter ma réponse à répondre à votre autre question:

bootstrap twitter vous dites utilise une classe .clearfix, qui est similaire à la css I ci-dessous, mais leurs besoins de méthode à ajouter à l'élément, à savoir: « classe élément = » clearfix » ou similaire, alors que de css pseduo nous ne avez pas besoin d'ajouter ce bit de code supplémentaire à notre document. Prenez note toutefois pas

de tout le soutien des navigateurs css pseduo.

Autres conseils

Vous avez probablement faire:

<div class="container">
   <div class="row">
      <div class="span6">column 1</div>
      <div class="span6">column 2</div>
   </div>
</div>

clearfix ne devrait pas être nécessaire.

Licencié sous: CC-BY-SA avec attribution
Non affilié à StackOverflow
scroll top