De combien de façons CSS dispose-t-il pour effacer les flottants ?

Cette fois, je vais vous montrer combien de façons CSS d'effacer les flotteurs et quelles sont les précautions pour effacer les flotteurs. Voici un cas pratique, jetons un coup d'oeil.

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. Une boîte de hauteur peut fermer le flottant <.>

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

Inconvénients : Au travail, nous n'augmenterons jamais la hauteur de toutes les cases car cela est gênant et ne peut pas s'adapter aux changements rapides de pages.

2. débordement

Supporter la hauteur de l'élément parent

Un père ne peut pas être Lui-même Le fils flottant s'étendait en hauteur. Cependant, tant que overflow:hidden; est ajouté au père, le père peut être expulsé par son fils.

overflow:hidden; permet à la marge de prendre effet.

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

Je pense que vous maîtrisez la méthode après avoir lu le cas dans cet article. Pour des informations plus intéressantes, veuillez prêter attention aux autres articles connexes sur le site Web chinois de php !

Lecture recommandée :

React et CSS3 implémentent l'animation d'ouverture de l'enveloppe rouge WeChat
Arrière-plan CSS -Explication détaillée de l'utilisation de la pièce jointe

Exemple d'animation CSS3 de clic pour agrandir

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!