communauté Apprendre Bibliothèque d'outils Loisirs
recherche
Français
Maison > interface Web > tutoriel CSS > Nettoyage flottant CSS, n'utilisez pas l'échange clear:both tag_Experience

Nettoyage flottant CSS, n'utilisez pas l'échange clear:both tag_Experience

WBOY
Libérer： 2016-05-16 12:05:25
original
1443 Les gens l'ont consulté

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.
Étiquettes associées：
CSS，浮动清理，clear:both
source：php.cn
Article précédent：Code d'implémentation de la fonction d'interception de texte CSS Article suivant：La zone de texte CSS ferme la méthode de saisie_Échange d'expérience
Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Derniers articles par auteur
Derniers numéros
function_exists() ne peut pas déterminer la fonction personnalisée Function test () {return true;} if (function_exists ('test')) {echo "le test est une ...
Depuis 2024-04-29 11:01:01
0
3
2065
Comment afficher la version mobile de Google Chrome Bonjour professeur, comment puis-je changer Google Chrome en version mobile ?
Depuis 2024-04-23 00:22:19
0
11
2229
La fenêtre enfant exploite la fenêtre parent, mais la sortie ne répond pas. Les deux premières phrases sont exécutables, mais la dernière ne peut pas être implémentée...
Depuis 2024-04-19 15:37:47
0
1
1873
Il n'y a aucune sortie dans la fenêtre parent document.onclick = function(){ window.opener.document.write('Je suis la sortie de la fenêt...
Depuis 2024-04-18 23:52:34
0
1
1756
Où sont les didacticiels sur la cartographie mentale CSS ? Didacticiel
Depuis 2024-04-16 10:10:18
0
0
1788
Rubriques connexes
Plus>
Recommandations populaires
Tutoriels populaires
Plus>
Tutoriels associés
Recommandations populaires
Derniers cours
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal