Maison > interface Web > tutoriel CSS > le corps du texte

Solution au problème de l'effondrement de l'élément parent causé par float

清浅
Libérer: 2019-04-17 10:38:47
original
4022 Les gens l'ont consulté

La solution pour flotter flottant provoquant l'effondrement de l'élément parent est la suivante : définir une hauteur pour l'élément parent, définir un div vide après le dernier élément enfant et utiliser clear pour effacer le flotteur, définir overflow : caché sur l'élément parent, et add La pseudo-classe after

utilise souvent l'attribut float lors de la mise en page des pages Web. Cependant, lorsque l'élément enfant sous l'élément parent est défini sur float, l'élément parent s'effondre. Ensuite, dans l'article, nous présenterons en détail comment résoudre le problème de l'effondrement de l'élément parent dû au flottement. Il a une certaine valeur de référence et nous espérons que cela sera utile à tout le monde

Solution au problème de l'effondrement de l'élément parent causé par float

[Cours recommandé : Tutoriel CSS]

Après avoir défini la couleur d'arrière-plan sur l'élément parent d'un élément, après avoir défini float pour l'élément enfant, vous constaterez que la couleur d'arrière-plan de l'élément parent disparaît, et lorsque l'élément parent a une bordure, vous constaterez que l'élément flottant ne peut pas ouvrir la bordure.

Exemple : Aucun flotteur n'est défini pour li

 <ul style="background: pink;border: 1px solid #ccc">
  <li>PHP中文网</li>
  <li>PHP中文网</li>
  <li>PHP中文网</li>
  <li>PHP中文网</li>
  </ul>
Copier après la connexion
Rendu :


Solution au problème de l'effondrement de l'élément parent causé par float

Après avoir réglé le flotteur

<ul style="background: pink;border: 1px solid #ccc">
  <li style="float: left;list-style: none;">PHP中文网</li>
  <li style="float: left;list-style: none;">PHP中文网</li>
  <li style="float: left;list-style: none;">PHP中文网</li>
  <li style="float: left;list-style: none;">PHP中文网</li>
  </ul>
Copier après la connexion
Rendu


Solution au problème de l'effondrement de l'élément parent causé par float

Comme vous pouvez le voir sur l'image ci-dessus, lorsque l'élément enfant est défini Après avoir flotté, le contenu de l'élément parent n'est pas étiré. C'est-à-dire qu'une fois que l'élément est défini sur float, il n'est plus sous la juridiction de l'ensemble du flux de documents. Ensuite, sa hauteur qui existait auparavant dans l'élément parent n'existera plus avec l'élément float. par défaut, l'élément n'aura aucun contenu (prémisse : cela signifie qu'une hauteur fixe n'est pas définie pour l'élément parent. Si l'élément parent lui-même a une hauteur fixe, cette situation ne se produira pas) et un effondrement se produira

Solution à l'effondrement de l'élément parent :

(1) Ajoutez une hauteur à l'élément parent

La hauteur ne peut pas être confirmée dans cette méthode, et vous il faut essayer de le définir plusieurs fois

<ul style="height:200px;background: pink;border: 1px solid #ccc">
Copier après la connexion
(2) Ajouter après le dernier élément enfant Pour un div vide, ajoutez-y le style clear et effacez les flotteurs des deux côtés

<🎜 ; >

(3) L'élément parent définit overflow: Hidden;
 <div style="clear:both;"></div>
Copier après la connexion

(4) Parent Ajouter la pseudo-classe after à l'élément
 <ul style="background: pink;border: 1px solid #ccc;overflow: hidden;">
Copier après la connexion

Résumé : Le ci-dessus est l’intégralité du contenu de cet article, j’espère qu’il sera utile à tout le monde.
.parent:after{
content:"";
display:block;
clear:both;
}
Copier après la connexion

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!

Étiquettes associées:
source:php.cn
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
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal