Une introduction détaillée à l'une des méthodes les plus utiles pour effacer les flottants en CSS (avec code)

Le contenu de cet article est de partager avec vous une introduction détaillée (avec code) sur l'une des meilleures façons d'effacer les flottants en CSS. Il a une certaine valeur de référence. Les amis dans le besoin pourront s'y référer. vous être utile.

Lorsque nous écrivons des pages Web, nous nous inquiétons souvent de l'impact du flottement. Parce que les éléments enfants flottants font que l'élément parent est faible, la page Web est gâchée et ne peut pas atteindre l'objectif. résultats que nous souhaitons.
Flotteurs clairs, je ne recommande que cette méthode !
La méthode suivante est celle que j'utilise depuis que j'ai appris le front-end, et je ne l'ai jamais changée car elle est très utile :

.clearfix:after{    
content: "";    
height:0;    
line-height: 0;    
display:block;    
visibility: hidden;    
clear:both;}

Utilisation spécifique :

<ul class="clearfix">
    <li style="float:left;"></li>
    <li style="float:left;"></li>
    <li style="float:left;"></li>
    <li style="float:left;"></li></ul>

Si l'élément enfant est flottant, ajoutez simplement cette classe à l'élément parent, cela fonctionnera quels que soient vos efforts !

Parce que ce style est souvent utilisé, il est recommandé de l'ajouter au style public !

Recommandations associées :

Html et CSS combinés pour réaliser le code d'adaptation de page Web mobile

Accès au service en html Méthode de fin analyse (images et texte)

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!