Une introduction détaillée à plusieurs façons d'effacer les flottants en CSS

Qu'est-ce qu'un flotteur ?

Caractéristiques : 1--Les éléments flottants n'occuperont pas l'espace du flux standard, mais affecteront la disposition du texte dans le flux standard. Flottant flotte uniquement à gauche et à droite.
2--La position de l'élément flottant A est liée à l'élément précédent. Le haut de A est aligné avec le haut de l'élément précédent si l'élément précédent a un flotteur, et avec son bas s'il n'y a pas de flotteur.
3--Une boîte enfant dans une boîte parent Si un des enfants est flotté, les autres enfants doivent être flottés afin d'afficher une ligne.
4--Une fois l'élément flottant, si la largeur et la hauteur ne sont pas définies, l'élément définira la taille du contenu en fonction de la quantité de contenu et aura les attributs de l'élément de bloc en ligne.
5--Une fois l'élément flottant, si l'élément parent ne définit pas de hauteur. Provoquera l'effondrement de la hauteur de l'élément parent.
Résoudre ce problème ?
-----Ajouter des attributs à l'élément parent : overflow:hidden ; masquer la partie excédentaire

attribut overflow :
Lorsque les éléments de la boîte dépassent la taille de la tache solaire elle-même, la content Mode d'affichage
visible : le contenu ne sera pas rogné et sera présenté en dehors de la boîte de l'élément (par défaut)
caché : sera rogné et masqué, vous pouvez utiliser cet attribut pour effacer le flottant
auto : barre de défilement d'affichage adaptative
scrol : Le contenu sera coupé et la barre de défilement sera affichée

bfc :
Un débordement peut déclencher le bfc de l'élément, permettant à l'élément d'avoir l'espace et les autorisations pour la composition.Tous les éléments du bfc sont basés sur L'élément parent effectue la composition et la mise en page, et tous les éléments parents ont des propriétés d'emballage. C'est le principe qui résout le problème de l'effondrement en hauteur.
Flottant, positionnement, débordement, affichage, tableau, cellule de tableau peuvent tous déclencher bfc.

Effacer le flotteur :
-- Cela signifie que lorsqu'il n'y a aucun élément flottant sur les côtés gauche et droit de l'élément actuel, l'élément sera affiché dans le flux standard.
--Quatre façons d'effacer les flotteurs :
1. Utilisez des balises vides pour effacer les flotteurs et placez-les sur le mur. Ajoutez des balises.
Ajoutez un 915caa8c7a7823c8ba9e5493889b0db994b3e26ee717c64999d7867364b1b4a3 après l'étiquette flottante, ne définissez pas la largeur et la hauteur, puis définissez .clearboth{clear:both}, puis placez l'étiquette requise dans cet espace Juste après le label
2. Utilisez l'attribut overflow pour effacer le float. Causera des blessures accidentelles.
overflow:hidden;
3. Utilisez le pseudo-objet after pour effacer les flotteurs
4. Utilisez le pseudo-objet avant-après pour effacer les flotteurs
clearfix (une combinaison des méthodes 2, 3 et 4, couramment utilisé).

.clearfix
   父盒子要把子盒子包裹住，触发bfc同时清除前后浮动。
   .clearfix{
      display:table;<!-- 触发dfc -->

   }
   .clearfix:before,.clearfix:after{
      content:"";
      display:block;
      clear:both;
      height:0;
   }
   在ie6中display:table;不能触发dfc，所以用以下方式进行触发
   .clearfix{
      _zoom:1;
   }

Utilisation :

<p class="top">top</p>
	<p class="clearfix">
	    <p class="left">left</p>
	    <p class="right">right</p>
	</p>			
	<p class="bottom">bottom</p>

.clearfix{
			 	display: table;/* 触发nfc */
			 }
			 .clearfix:before,.clearfix:after{
				/* 前后加一个空的标签清除浮动 */
				content: "";
				display: block;
				height: 0;
				clear: both;
			 }
			 .clearfix{
			 	_zoom:1;/* 为了兼容ie6 */
			 }

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!