Maison  >  Article  >  interface Web  >  Comment résoudre le problème selon lequel le div parent ne peut pas être ouvert automatiquement une fois que le div enfant est défini sur flottant.

Comment résoudre le problème selon lequel le div parent ne peut pas être ouvert automatiquement une fois que le div enfant est défini sur flottant.

不言
不言original
2018-07-25 09:41:472547parcourir

Le contenu partagé avec vous dans cet article concerne la configuration de float sur le div enfant, ce qui empêchera le div parent de s'ouvrir automatiquement. Le contenu est très détaillé. Ensuite, prenons un. regardez le contenu spécifique. J'espère que cela pourra aider tout le monde.

Raison : Le p interne perd les styles clear:both et display:block après float:left, donc le p externe ne sera pas ouvert.

Voici plusieurs solutions (en supposant que la classe du parent p est "conteneur") :

  • Méthode 1. Utiliser des pseudo-classes

container::after{
    display: block;
    height:0;
    content: '';
    clear: both;
}
container{
    display: inline-block; /*第一种撑开办法,底下会有部分被遮到,所以添加这行,就完美了*/
}
  • Méthode 2. Le principe de non-ouverture est que le débordement n'est pas visible, il suffit donc d'ajouter overflow:auto au parent IE doit utiliser _height:1%; ;

container{
    overflow: auto;/*让主要内容区随内容自动撑开*/
    overflow-y:hidden;/*把出现的滚动条隐藏,但是底下会被遮到一点,不完美*/
     _height:1%;/*对IE的hack*/
}
  • Méthode 3. Vous pouvez ajouter un sous-p à la fin pour effacer le flottant : 5e61f882fc28a1ad04b8488b9fa829db94b3e26ee717c64999d7867364b1b4a3
    Définissez le style. clear{clear:both; font-size:0; height:1%;}

  • Méthode 4. Vous pouvez définir la hauteur du parent p (c'est-à-dire l'agrandir manuellement, ce qui est inflexible) ; 🎜>Méthode 5. Réglez directement la hauteur du p parent

    comme ceci Il peut également être ouvert automatiquement
  • display: inline-block;Méthode 6. Réglez directement le sous-p

    Il peut également être ouvert automatiquement, mais le problème de composition doit être étudié et étudié
  • display: inline-block;Méthode 7. J'ai également trouvé une méthode sur Internet pour ajouter des attributs au parent p :

  • display:table;Méthode 8. Si l'enfant p flotte, je ne peux pas vous piéger ? OK, je laisse le parent p flotter également : Le paramètre parent p

    peut aussi être
  • float: left;Recommandations associées :

tinymce et prism réalisent la mise en évidence du code et la configuration chinoise Méthode et processus

Introduction à la façon de dynamiquement générer des éléments html et ajouter des attributs aux éléments (avec code)

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