Comment effacer le flotteur en CSS-tutoriel CSS-php.cn

Comment effacer le flotteur en CSS

醉折花枝作酒筹

Libérer： 2023-01-04 09:34:40

original

4531 Les gens l'ont consulté

Méthode pour effacer le flottant : 1. Définissez la hauteur dans le div parent avec la syntaxe "height: height" 2. Ajoutez un div vide à la fin et définissez le style "clear:both" ; la pseudo-classe dans le div parent ":after" et zoom ; 4. Le div parent définit "overflow:hidden".

Comment effacer le flotteur en CSS

L'environnement d'exploitation de ce tutoriel : système Windows 7, version CSS3&&HTML5, ordinateur Dell G3.

Flottant fera flotter l'étiquette actuelle vers le haut et affectera également la position des étiquettes avant et arrière, l'étiquette parent et l'attribut largeur hauteur.

Et le même code peut s'afficher différemment dans différents navigateurs, ce qui rend la suppression des flottants plus difficile.

Il existe de nombreuses façons de résoudre les problèmes causés par le flottement, mais certaines méthodes ont des problèmes de compatibilité avec les navigateurs.

1. Hauteur de définition du div parent

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<style type="text/css">
.div1{
    background:#000080;
    border:1px solid red;
    /*解决代码*/
    height:200px;
}
.div2{
    background:#800080;
    border:1px solid red;
    height:100px;
    margin-top:10px;
    width:98%
}
.left{
    float:left;
    width:20%;
    height:200px;
    background:#DDD
}
    .rightright{
    float:rightright;
    width:30%;
    height:80px;
    background:#DDD
}
</style>
</head>
    <body>
        <div class="div1">
        <div class="left">Left</div>
        <div class="right">Right</div>
        </div>
        <div class="div2">div2</div>
    </body>
    </html>

Copier après la connexion

Principe : Définir manuellement la hauteur du div parent pour résoudre le problème. problème Le div parent ne peut pas obtenir automatiquement la hauteur.

Avantages : simple, moins de code, facile à maîtriser

Inconvénients : convient uniquement aux mises en page à hauteur fixe. Pour donner une hauteur précise, des problèmes surviendront si la hauteur est différente de celle du div parent. .

2. Ajoutez une balise div vide à la fin clear:both

<style type="text/css">
.div1{
    background:#000080;
    border:1px solid red
}
.div2{
    background:#800080;
    border:1px solid red;
    height:100px;
    margin-top:10px
}
.left{
    float:left;
    width:20%;
    height:200px;
    background:#DDD
}
.rightright{
    float:rightright;
    width:30%;
    height:80px;
    background:#DDD
}
/*清除浮动代码*/
.clearfloat{
    clear:both
}
</style>

Copier après la connexion

rrree

Principe : ajoutez un div vide, utilisez clear:both amélioré par css pour effacer le. flotter et laisser le parent Le div peut obtenir automatiquement la hauteur

Avantages : Simple, moins de code, bon support du navigateur, pas sujet à des problèmes étranges

Inconvénients : De nombreux débutants ne comprennent pas le principe ; si la page a de nombreuses mises en page flottantes, il est nécessaire d'ajouter beaucoup de divs vides, ce qui met les gens très mal à l'aise

Pseudo-classe de définition de div parent : après et zoom<. 🎜>

<div class="div1">
    <div class="left">Left</div>
    <div class="right">Right</div>    
    <div class="clearfloat"></div>
</div>
<div class="div2">div2</div>

Copier après la connexion

<style type="text/css">
.div1{
    background:#000080;
    border:1px solid red;
}
.div2{
    background:#800080;
    border:1px solid red;
    height:100px;
    margin-top:10px
}
.left{
    float:left;
    width:20%;
    height:200px;
    background:#DDD
}
.rightright{
    float:rightright;
    width:30%;
    height:80px;
    background:#DDD
}
/*清除浮动代码*/
.clearfloat:after{
    display:block;
    clear:both;
    content:"";
    visibility:hidden;
    height:0
}
.clearfloat{
    zoom:1
}
</style>

Copier après la connexion

Principe : IE8 ou supérieur et les navigateurs non IE ne prennent en charge que :after. Le principe est quelque peu similaire à la méthode 2. Zoom (la conversion IE a des attributs) peut résoudre le problème flottant de ie6 et ie7

Avantages : Le navigateur a un bon support et n'est pas sujet à des problèmes étranges (actuellement : Utilisé par les grands sites Web, tels que : Tencent, NetEase, Sina, etc.)

Inconvénients : Il y a beaucoup de code , et de nombreux débutants ne comprennent pas le principe. Deux lignes de code doivent être utilisées en combinaison pour être prises en charge par les navigateurs grand public.

4. Débordement de définition du div parent : caché

<div class="div1 clearfloat">
        <div class="left">Left</div>
        <div class="right">Right</div>
</div>
<div class="div2">div2</div>

Copier après la connexion

rrreePrincipe : la largeur ou le zoom : 1 doit être défini et la hauteur ne peut pas être définie. Lors de l'utilisation de

, parcourir Le navigateur vérifiera automatiquement la hauteur de la zone flottanteoverflow:hidden

Avantages : simple, moins de code, bonne prise en charge du navigateur

Inconvénient : ne peut pas être utilisé avec la position, car la taille dépassée sera masquée.

Partage de vidéos d'apprentissage :

tutoriel vidéo CSS

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!

Php8, je viens aussi

Apprenez la mise en page d'un site Web en 30 minutes

Tutoriel vidéo Shangguan Oracle débutant à compétent

Votre première ligne de code UNI-APP

Flutter de zéro au lancement de l'application

Brother Lian Nouveau didacticiel vidéo Linux

Tutoriel vidéo AXURE 9 (convient à l'interface utilisateur interactive de conception de produits du chef de produit)

Tutoriel vidéo PS Zero Basic Proficiency

Tutoriel vidéo de 16 jours sur l'interface utilisateur pour vous aider à démarrer

Tutoriel vidéo sur les techniques PS et les techniques de découpage

Tutoriel vidéo sur la construction et le lancement de projets d'Alibaba Cloud Environment

Présentation des réseaux informatiques - Connaissances de base que les programmeurs doivent maîtriser

Tutoriel essentiel pour les programmeurs - Explication du protocole HTTP

Tutoriel vidéo Websocket

Comment effacer le flotteur en CSS