Maison >interface Web >tutoriel CSS >Une brève discussion sur l'utilisation du CSS pour effacer les clearfix flottants et effacer

Une brève discussion sur l'utilisation du CSS pour effacer les clearfix flottants et effacer

高洛峰original: 2017-03-17 16:33:511992parcourir

L'éditeur suivant vous apportera une brève discussion sur l'utilisation de CSS clear float (clearfix et clear). L'éditeur le trouve plutôt bon, je vais donc le partager avec vous maintenant et le donner comme référence pour tout le monde. Suivons l'éditeur et jetons un coup d'œil

Cet article explique principalement comment utiliser clearfix et clear en html, pour les enfants qui viennent tout juste de commencer à comprendre le CSS. Je n'écrirai pas ici sur les styles de clearfix et clear.

Parlons de l'utilisation de ces deux classes. Tout d'abord, regardons un exemple :

<!DOCTYPE HTML>
<html lang="en-US">
<head>
    <meta charset="UTF-8"/>
    <title>如何在html中使用clearfix和clear</title>
    <link rel="stylesheet" type="text/css" href="/css/base.css" media="all"/>
    <style type="text/css">
    .fl{float:left;}   
    .demo{background:#ccc;}   
    .item1{background:#f90;height:100px;width:100px;}   
    .item2{background:#fc0;height:200px;width:100px;}   
    </style>
</head>
<body>
    <p class="demo">
        <p class="fl item1"></p>
        <p class="fl item2"></p>
    </p>
</body>
</html>

Nous savons tous que l'utilisation de floats causera de nombreux problèmes inconnus. peut constater que la hauteur de class="demo" n'est pas étirée par le p à l'intérieur. C'est parce que le p à l'intérieur flotte et se détache du document. Parce que la démo elle-même n'a pas de hauteur, nous ne pouvons pas voir son fond gris. Bien sûr, donnez simplement une hauteur à la démo, mais cela s'écarte du but de cet article (parfois nous voulons que la hauteur du p externe soit déterminée par le contenu à l'intérieur).

Puisqu'il s'agit d'un problème causé par le flottement, effacez simplement le flottement. Je pense que les experts disposent de plusieurs façons pour effacer le flottement, comme le débordement : caché. Ci-dessous, je présenterai l'utilisation de clearfix et clear pour effacer les flotteurs.

<!DOCTYPE HTML>
<html lang="en-US">
<head>
    <meta charset="UTF-8"/>
    <title>如何在html中使用clearfix和clear</title>
    <link rel="stylesheet" type="text/css" href="/css/base.css" media="all"/>
    <style type="text/css">
    .fl{float:left;}   
    .demo{background:#ccc;}   
    .item1{background:#f90;height:100px;width:100px;}   
    .item2{background:#fc0;height:200px;width:100px;}   
    </style>
</head>
<body>
    <h2>用 clear 清除浮动</h2>
    <p class="demo">
        <p class="fl item1"></p>
        <p class="fl item2"></p>
        <p class="clear"></p>
    </p>
    <h2>用 clearfix 清除浮动</h2>
    <p class="clearfix demo">
        <p class="fl item1"></p>
        <p class="fl item2"></p>
    </p>
</body>
</html>

Nous avons constaté que clearfix est principalement utilisé sur le calque parent du calque flottant, tandis que clear est principalement utilisé entre le calque flottant et le calque flottant, et est à au même niveau que le calque flottant Si vous souhaitez augmenter la hauteur du calque parent, clear doit être placé à la fin.

Il est difficile de dire laquelle de ces deux méthodes est la meilleure, je peux seulement dire que les besoins spécifiques doivent être traités en détail.

Articles Liés

Voir plus