Maison > Article > interface Web > Nettoyage flottant CSS, n'utilisez pas l'échange clear:both tag_Experience
Nettoyage flottant CSS, n'utilisez pas l'échange clear:both tag_Experience
- WBOYoriginal
- 2016-05-16 12:05:251424parcourir
Par exemple :
40px; Some Content
"
En prévisualisant ce code à ce stade, nous constaterons que l'élément parent le plus externe, conteneur flottant, n’est pas affiché. En effet, l'élément enfant flotte et s'éloigne du flux de documents, ce qui fait que la hauteur de l'élément parent est nulle.
Si vous modifiez le code pour :
width:30%; height:40px;background:#EEE; ">Certains contenus
;
Notez qu'il y a une pièce supplémentaire de code pour nettoyer les flotteurs. C'est une bonne pratique de codage CSS, mais cette approche ajoute des éléments inutiles. Voici une meilleure façon de modifier le code HTML en :
div style="float:left; width:30%; height:40px;background:#EEE; ">Certains contenus
Contrôle "Float Cleanup" :
Copier le code
Le code est le suivant : .clearfix:after {} { content: "."; clear: Both; height: 0;
visibilité: Hidden; display: block
} /* Ceci est pour le traitement Firefox, car Firefox prend en charge les éléments générés, mais pas toutes les versions d'IE. prise en charge des éléments générés */
.clearfix {}{
display : inline-block ; Traitement effectué par le navigateur */
/**//* Masquer de IE-mac */
* html .clearfix {}{ height: 1%;} /* Ceci est le traitement effectué sur le navigateur IE sur win */
.clearfix {}{display: block;} /* Ceci est une modification pour afficher : inline-block;, réinitialiser à block element*/
/**//* Fin masquer sur IE-mac */
À ce stade, si vous prévisualisez le code ci-dessus (supprimez ce commentaire), vous constaterez que même si l'élément enfant est floated, le conteneur float de l'élément parent l'entourera toujours et effectuera une adaptation en hauteur.
} /* Ceci est pour le traitement Firefox, car Firefox prend en charge les éléments générés, mais pas toutes les versions d'IE. prise en charge des éléments générés */
.clearfix {}{
display : inline-block ; Traitement effectué par le navigateur */
/**//* Masquer de IE-mac */
* html .clearfix {}{ height: 1%;} /* Ceci est le traitement effectué sur le navigateur IE sur win */
.clearfix {}{display: block;} /* Ceci est une modification pour afficher : inline-block;, réinitialiser à block element*/
/**//* Fin masquer sur IE-mac */
À ce stade, si vous prévisualisez le code ci-dessus (supprimez ce commentaire), vous constaterez que même si l'élément enfant est floated, le conteneur float de l'élément parent l'entourera toujours et effectuera une adaptation en hauteur.