Share
J'ai reçu plusieurs demandes de tutoriels CSS plus simples qui enseignent les bases difficiles. Cela servira de première entrée dans une série qui recevra de nouveaux ajouts sporadiquement chaque mois. Aujourd'hui, nous allons examiner le débordement: astuces de clearfix pour forcer un div parent à contenir ses enfants.
Avez-vous déjà remarqué que, lorsque vous intégrez tous les éléments enfants dans une div, le parent n'occupe aucune place? Par exemple, dans votre éditeur de code, en ajoutant ce qui suit dans la balise body.
Ajoutons maintenant un peu de CSS pour simuler un site Web typique..
#container background: red; largeur: 800px; rembourrage en bas: 2em; #main background: green; hauteur: 500px; largeur: 600px; Flotter à droite; #sidebar background: blue; hauteur: 500px; largeur: 200px; float: gauche;
Ci-dessus, nous définissons simplement les couleurs de l’arrière-plan et faisons flotter la barre latérale et les divisions principales vers la gauche et la droite, respectivement. Notez le "padding-bottom: 2em;". Cela devrait nous permettre de voir le fond rouge tout en bas, non? Affichez la page dans votre navigateur et vous verrez:
Où est passé le fond rouge? Pourquoi ne s'affiche-t-il pas?
Lorsque vous faites flotter tous les enfants, le parent ne prend pratiquement pas de place. Pour mieux illustrer ce fait, définissons une hauteur arbitraire de 50 px sur le conteneur, puis réduisons l'opacité des div enfants afin que nous puissions voir le fond rouge situé en dessous..
#container … autres styles height: 50px; #main, #sidebar opacity: .5;
Actualisez votre navigateur et vous verrez:
Tellement bizzare. Nous avons spécifié une hauteur de 50 px pour notre conteneur div, mais les divs principale et latérale sont flagrants. débordement ses limites, comme divs bratty gâtés.
Revenez à votre feuille de style et appliquez un style:
#container … débordement d'autres styles: hidden;
Après un autre rafraîchissement, nous voyons:
Cela aide partiellement. Maintenant, nous n'avons pas à nous soucier des enfants pubères désobéissant à leurs parents. Cela dit, cela n'aide vraiment pas notre situation.
"Essayez d'éviter de spécifier les hauteurs autant que possible. Il existe généralement une méthode plus intelligente.
La solution consiste à extraire la propriété height de notre conteneur.. Retirer la propriété suivante.
#container … autres styles height: 50px; /* Enlève ça */
Un dernier rafraîchissement, et notre problème semble être résolu.
Vous pouvez également supprimer les propriétés d'opacité. Ils étaient juste à des fins de démonstration. La méthode présentée ci-dessus fonctionnera dans la plupart des cas. Cependant, introduisons une autre variable. Et si nous voulons positionner une image sur la bordure de notre conteneur, de sorte qu'elle se chevauche. Vous avez vu cet effet plusieurs fois. À titre d'exemple, nous allons simplement utiliser l'image d'un cercle avec un arrière-plan transparent. Sur un site réel, cela pourrait représenter un bouton "Acheter maintenant" ou "S'inscrire" - quelque chose de ringard comme ça.
En utilisant CSS, positionnons l'image dans la partie supérieure droite de notre "site Web", en chevauchant les bords. C'est ce que nous voulons:
Tout d'abord, nous référons l'image dans notre code HTML.
… Reste de html
Ensuite, revenez à votre feuille de style et ajoutez les styles suivants.
img position: absolute; à droite: -100px; en haut: 20px;Contexte de positionnement
On pourrait penser que cela placera l'image juste au-dessus du bord droit du conteneur div. Cependant, il aurait tort.
Comme nous n'avons pas défini de contexte de positionnement, la fenêtre sera utilisée à la place..
De toute évidence, ce n'est pas ce que nous voulons. Pour appliquer un contexte de positionnement à notre conteneur div, ajoutez simplement "position: relative;" à #container. Une fois que nous l’aurons fait, l’image n’utilisera plus la fenêtre comme référence..
Quel est le problème maintenant?
Mais maintenant, nous avons un nouveau problème! Parce que nous avons défini le débordement: caché dans notre conteneur, nous nous sommes tiré une balle dans le pied. Comment pouvons-nous dépasser les limites et prendre les noms si le débordement est défini sur masqué? Devrions-nous simplement accepter que ce site Web particulier ne prendra pas de noms aujourd'hui? Absolument pas. Dans ces cas, il vaut la peine d'utiliser une méthode différente.
L'astuce de Clearfix
Avec cette méthode, nous utiliserons CSS pour ajouter du contenu après notre div de conteneur. Ce contenu créé effacera alors notre div, le forçant ainsi à contenir ses enfants. Évidemment, nous ne voulons pas voir ce contenu. Nous devons donc nous assurer de le cacher au spectateur..
Revenez à votre feuille de style, supprimez "overflow: hidden;" depuis votre conteneur div, et ajoutez ce qui suit:
#container … autres styles _height: 1%; #container: after content: "."; visibilité: cachée; bloc de visualisation; clarifier les deux; hauteur: 0; taille de police: 0;Cela peut paraître compliqué, mais je vous assure que c'est assez simple.
- _la taille: Déclencheurs "haslayout" dans Internet Explorer, en utilisant l’astuce du soulignement pour cibler directement IE6.
- contenu: Après le conteneur div, ajouter un point.
- visibilité: Nous ne voulons pas voir la période, alors cachez-la de la page. (Égal à l'opacité de réglage: 0;)
- afficher: Force la période à s'afficher au niveau du bloc plutôt qu'en ligne.
- clair: La propriété importante. Cela efface les divs principale et latérale. C’est la même chose que d’ajouter un non-sémantique
à notre page.- la taille: Ne prenez pas de place.
- taille de police: Juste une précaution pour Firefox. Ce navigateur ajoute parfois un peu d’espace après notre élément parent. Définir la taille de police à zéro corrige ce problème.
Conclusion
Bien que le débordement: le tour caché soit préférable, ce n’est pas toujours idéal. Vous devez utiliser la meilleure solution pour la tâche à accomplir. L'important est d'apprendre chaque méthode pour disposer des outils nécessaires à la résolution du problème..
- Suivez-nous sur Twitter ou abonnez-vous au fil RSS NETTUTS pour plus d'articles et de sujets sur le développement Web quotidiens.
Accentsconagua
… Reste de html 
