Maison > Article > interface Web > Quel est le nom de la classe pour effacer les flotteurs dans le bootstrap
Quel est le nom de la classe pour effacer les flotteurs dans le bootstrap
- WBOYoriginal
- 2022-05-07 17:20:032464parcourir
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 ">".
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>
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>Ouvrez le fichier test.html dans le navigateur pour voir l'effet.
Recommandations associées : tutoriel bootstrap
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!