Maison >interface Web >tutoriel CSS >Résumé des méthodes courantes de partage de CSS DIV pour effacer le flottement
Résumé des méthodes courantes de partage de CSS DIV pour effacer le flottement
- 高洛峰original
- 2017-03-13 17:51:521441parcourir
L'éditeur ci-dessous partagera avec vous un résumé des méthodes courantes de DIV CSS Clear Floating. L’éditeur le trouve plutôt bien, alors j’aimerais le partager avec vous maintenant et le donner comme référence pour tout le monde. Suivons l'éditeur pour jeter un œil
p Les flotteurs de compensation CSS sont un problème courant dans la mise en page Je pense que tous les experts ont leurs propres méthodes. Aujourd'hui, nous allons discuter de certains problèmes courants. La méthode est résumée (PS : elle est loin d’être originale. Voici mon propre résumé, qui est aussi mon propre processus d’intériorisation, j’espère qu’il pourra vous être utile).
p L'effet flottant CSS signifie que lorsque la hauteur de l'élément parent n'est pas définie, tous les éléments enfants flottent hors du flux de texte, provoquant l'effondrement de la hauteur de l'élément parent (PS : dans des circonstances normales, le la hauteur de l'élément parent s'effondre (Il est pris en charge par les éléments enfants); ou certains éléments enfants flottent et se détachent du flux de texte, provoquant un désordre dans la disposition des autres éléments.
p Les méthodes courantes pour effacer les flottants en CSS sont les suivantes :
<style type="text/css">
.fl{float:left;}
.demo{background:#ccc;}
.item1{background:#F571E3;height:100px;width:100px;}
.item2{background:#21B2F7;height:200px;width:100px;clear: both;}
</style>
</head>
<body>
<h2>用 clearfix 清除浮动</h2>
<p class="demo">
<p class="fl item1"></p>
<p class="item2"></p>
</p>
</body> Avant d'effacer le float, l'effet de item1 est laissé flottant (à ce moment, la hauteur de l'élément parent est étirée de la hauteur de l'élément item2 non flottant) :
overflow : caché ; au CSS de l'élément parent (lorsque tous les éléments enfants ne sont pas flottants, les éléments non flottants agrandiront l'élément parent) La hauteur de l'élément, mais la disposition provoquée par les éléments flottants doit être modifiée en utilisant padding), mais l'élément parent de cette méthode ne peut pas être positionné en utilisant position, sinon cela ne fonctionnera pas. Le code et l'effet sont les suivants :
Effacer l'effet avant de flotter. En raison de l'effondrement élevé de l'élément parent, l'arrière-plan background:#ccc n'a aucun effet :<style type="text/css">
.fl{float:left;}
.demo{background:#ccc;overflow: hidden;}
.item1{background:#F571E3;height:100px;width:100px;}
.item2{background:#21B2F7;height:200px;width:100px;}
</style>
</head>
<body>
<p class="demo">
<p class="fl item1"></p>
<p class="fl item2"></p>
</p>
</body>.
L'effet après avoir effacé le flottant :
3. Ajouter des pseudo-classes : après et zoomer sur le parent Le code et l'effet sont les suivants :
<style type="text/css">
.fl{float:left;}
.demo{background:#ccc;zoom: 1;}
.demo:after{display:block;clear:both;content:"";visibility:hidden;height:0}
.item1{background:#F571E3;height:100px;width:100px;}
.item2{background:#21B2F7;height:200px;width:100px;}
</style>
</head>
<body>
<p class="demo">
<p class="fl item1"></p>
<p class="fl item2"></p>
</p>
</body>
Effacer l'effet après le flottement :
bootstrap
t, vous pouvez ajouter une
à son élément parent comme La classe, le code et l'effet de clearfix sont les suivants : L'effet après la suppression des flotteurs :
Les méthodes ci-dessus ont leurs propres avantages et inconvénients. Vous pouvez choisir de les utiliser selon votre propre compréhension. Il existe également d'autres méthodes pour effacer les flottants, comme laisser l'élément parent flotter. , laissant l'élément parent afficher : table, etc. Les autres ne sont pas recommandés personnellement.
Le résumé ci-dessus des méthodes courantes pour effacer les flottants dans p CSS est tout le contenu partagé par l'éditeur. J'espère qu'il pourra vous donner une référence et j'espère que vous soutiendrez le site Web PHP chinois.
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!