Maison >interface Web >tutoriel HTML >Comment augmenter la hauteur d'un élément parent flottant

Comment augmenter la hauteur d'un élément parent flottant

php中世界最好的语言
php中世界最好的语言original
2018-02-26 09:47:082451parcourir

Cette fois, je vais vous montrer comment supporter la hauteur de l'élément parent flottant , et quelles sont les précautions pour supporter la hauteur de l'élément parent flottant. un cas pratique, regardons ensemble.

Lorsque nous définissons la valeur de l'attribut float sur un élément enfant qui n'est pas nul, il y aura deux situations dans lesquelles la hauteur de l'élément parent s'effondre

L'élément parent se produit. pour n'avoir aucune hauteur définie ; alors ceci L'élément parent n'a pas de hauteur.

La hauteur définie par son élément parent n'est pas suffisante, provoquant un débordement de l'élément enfant

Lorsque nous donnons une hauteur à l'élément li et le faisons flotter vers la gauche, la hauteur de ul est ; 0

Solution :

Activer BFC :

Définir l'attribut overflow de l'élément sur la valeur de l'attribut excluant le visible

Définir l'attribut float de l'élément pour en exclure aucun Valeur de l'attribut

                                                                                                     ‐‐                       Régler l'élément sur Positionnement absolu

                                                                                      ‐ Can''s'''‐‐‐‐ ‐‐‐‐‐‐‐‐- et , inline-flex

Flotteur transparent

Ajouter une hauteur appropriée à l'élément parent

Je crois que vous avez maîtrisé la méthode après avoir lu ces cas, plus Veuillez faire attention aux autres articles connexes sur le site Web chinois de php !

Lecture connexe :

Comment utiliser getBoundingClientRect() pour implémenter la fixation par roulement du conteneur div


Deux façons d'implémenter Méthode de disposition du flux en cascade


Comment faire apparaître une bordure en « points » après avoir cliqué sur le bouton

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!

Déclaration:
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