Quel est le nom de la classe pour effacer les flotteurs dans le bootstrap-Questions et réponses frontales-php.cn

Quel est le nom de la classe pour effacer les flotteurs dans le bootstrap

WBOY

Libérer： 2022-05-07 17:20:03

original

2551 Les gens l'ont consulté

Le nom de la classe pour effacer les flottants dans bootstrap est clearfix ; clearfix est une classe auxiliaire dans bootstrap. Vous pouvez facilement effacer les nombres à virgule flottante en ajoutant ".clearfix" à l'élément parent. "clearfix ">".

Quel est le nom de la classe pour effacer les flotteurs dans le bootstrap

L'environnement d'exploitation de ce tutoriel : système Windows 10, bootstrap version 3.3.7, ordinateur DELL G3

Quel est le nom de la classe de bootstrap pour effacer les flotteurs

Nous le savons dans l'écriture de ? pages statiques, effacer les flotteurs est une affaire très fastidieuse.

Les frameworks CSS généraux auront donc des styles utilisés pour effacer les flottants.

Dans bootstrap, ce style s'appelle clearfix.

Ajoutez simplement clearfix à l'élément parent de l'élément qui doit être effacé.

Clearfix est utilisé pour effacer facilement les nombres à virgule flottante en ajoutant .clearfix à l'élément parent

La syntaxe est similaire :

<div class="clearfix">...</div>

Copier après la connexion

L'exemple est le suivant :

Créez un nouveau fichier html nommé test.html pour expliquer la suppression des flotteurs dans le bootstrap Quelle classe utiliser. Utilisez la balise link pour charger le fichier bootstrap.min.css.

À l'intérieur de la balise div, utilisez div pour créer deux lignes de texte. Ajoutez l'attribut de classe au div externe et définissez sa largeur sur 350 px, sa hauteur sur 100 px et sa couleur d'arrière-plan sur gris via la classe.

Ajoutez un autre div avant les deux divs internes et ajoutez-y le nom de classe flottant clair clearfix, afin que le flottement des divs supérieur et inférieur ne s'affecte pas.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <link rel="stylesheet" href="js/bootstrap.min.css">
</head>
<body>
    <style>
        .mytest{
            width:400px;
            height:50px;
            background:#ccc;
        }
    </style>
    <div class="mytest">
        <div class="pull-left">测试一</div>
        <div class="clearfix"></div>
        <div class="pull-left">测试二</div>
    </div>
</body>
</html>

Copier après la connexion

Ouvrez le fichier test.html dans le navigateur pour voir l'effet.

Quel est le nom de la classe pour effacer les flotteurs dans le bootstrap