web-dev-qa-db-fra.com

Comment ne pas utiliser <div class = "clear"> dans le balisage

Tout le temps, mon code est criblé de <div> qui sont utilisés pour effacer/développer une div pour qu'elle soit correcte. Chaque fois que cela ne semble pas correct, j'ajoute un <div style="clear:both;"> et il résout le problème dans IE7.

Comment éviter de faire ça? Je joue avec le overflow:auto, overflow:hidden et je ne reçois rien.

Merci d'avance

cssxhtmlclear
17
Tom

Une méthode courante est la classe clearfix. Au lieu d'avoir besoin de <div style="clear:both;"> éléments (comme vous l'avez fait) après l'élément flottant, vous ajoutez simplement cette classe à l'élément flottant lui-même et la mise en page est automatiquement effacée après. 1

Mon préféré est de http://perishablepress.com/press/2009/12/06/new-clearfix-hack . Il prend en charge les navigateurs modernes ainsi que IE6 et IE7.

/* new clearfix */
.clearfix:after {
    visibility: hidden;
    display: block;
    font-size: 0;
    content: " ";
    clear: both;
    height: 0;
    }
* html .clearfix             { zoom: 1; } /* IE6 */
*:first-child+html .clearfix { zoom: 1; } /* IE7 */

Exemple (ancien/mauvais):

<div class="floatingrightmenu">This floats right</div>
<div style="clear:both;"></div>
<p>This text is cleared below it.</p>

Exemple (nouveau avec clearfix):

<div class="floatingrightmenu clearfix">This floats right</div>
<p>This text is cleared below it.</p>

1: Remarque: l'effacement automatique signifie qu'il fonctionne mieux avec des éléments flottants simples. Si vous souhaitez que plusieurs éléments flottent côte à côte, placez-les tous dans un seul conteneur qui est également flottant et appliquez clearfix à ce conteneur.

34
Nicole

si vous faites déborder: caché; sur le conteneur des éléments flottants qui devraient fonctionner! Je ne sais pas comment il s'agit d'un navigateur croisé.

3
Treemonkey