Résumé des méthodes clear float utilisant CSS

Cet article présente principalement plusieurs façons d'utiliser CSS pour résoudre le flottant et le flottant clair  : 1. Définir la hauteur de l'élément parent ; 2. débordement ; 3. Ajoutez un élément enfant (niveau de bloc) et définissez sa valeur clear sur les deux pour résoudre le problème (méthode des cloisons de séparation, méthode des murs intérieurs) ; avantPseudoObjet clear float. Jetons un coup d'œil avec l'éditeur ci-dessous

1. Définir la hauteur de l'élément parent

Si un élément doit flotter, son élément ancêtre doit avoir une hauteur. Hauteur Ce n'est que dans une boîte que le flotteur peut être fermé

Tant qu'il flotte dans une boîte avec une hauteur, alors ce flotteur n'affectera pas les éléments flottants suivants. L'impact du flotteur est donc effacé. 🎜>

Inconvénients : Au travail, on n'ajoutera jamais de hauteur à toutes les cases car c'est gênant et ne peut pas s'adapter aux changements rapides de page.

2. débordement

supporte la hauteur de l'élément parent

Un père ne peut pas être soutenu par son fils flottant. . Cependant, tant que overflow:hidden; est ajouté au père, le père peut être expulsé par son fils.

overflow:hidden; peut rendre la

marge efficace.

overflow:hidden;
overflow:auto;

Inconvénient : S'il y a du contenu de débordement à afficher, il sera également masqué en même temps.

3. Ajoutez des éléments enfants (niveau de bloc) et définissez leur valeur d'attribut claire sur les deux pour résoudre le problème

<p>
      <p></p>
      <p></p>
     <p></p>
  </p>
   <p>   → clear:both;
       <p></p>
       <p></p>
     <p></p>
  </p>

Le plus simple. solution La façon d'effacer les flottants est d'ajouter clear:both à la boîte ; elle représente ses propres éléments internes et n'est pas affectée par les autres boîtes.

Inconvénient : la marge n'est pas valide. Il n’y a pas d’écart entre les deux p.

3.1. Méthode de cloison de séparation :

Construire un mur entre les deux éléments flottants. Séparez les deux parties du flotteur afin que l'élément flottant derrière ne poursuive pas l'élément flottant devant.

Le mur utilise son propre corps comme espace.

<p>
       <p></p>
       <p></p>
       <p></p>
  </p>
   <p class="clear"></p>
   <p>
      <p></p>
      <p></p>
      <p></p>
  </p>

Nous avons constaté que la méthode de partition est facile à utiliser, mais le premier p n'a toujours pas de hauteur. Si l'on veut maintenant que le premier p atteigne automatiquement sa hauteur en fonction de son propre fils.

3.2. Méthode du mur intérieur :

<p>
       <p></p>
       <p></p>
       <p></p>
       <p class="clear"></p>
   </p>
  <p>
       <p></p>
      <p></p>
      <p></p>
  </p>

Avantages de la méthode du mur intérieur Autrement dit, cela empêche non seulement le p dans la partie arrière de poursuivre le p dans la partie avant, mais soutient également la hauteur du premier p.

De cette façon, le fond et la bordure de ce p peuvent être étirés en fonction de la hauteur de p

A utiliser après ou avant les pseudo-objets. pour effacer les flotteurs

p:after{content:"";display:block;clear:both;}
p:before{content:"";display:block;clear:both;}

Cette méthode est utilisée plus souvent et il est recommandé d'utiliser cette méthode dans le projet

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!