So löschen Sie Float in CSS-CSS-Tutorial-php.cn

So löschen Sie Float in CSS

醉折花枝作酒筹

Freigeben： 2023-01-04 09:34:40

Original

4646 Leute haben es durchsucht

So löschen Sie Floats: 1. Definieren Sie die Höhe des übergeordneten Div mit der Syntax „height: height“. 2. Fügen Sie am Ende ein leeres Div hinzu und legen Sie den Stil „clear:both“ fest. 3. Definieren Sie die Pseudoklasse „:after“ auf dem übergeordneten Div und Zoom 4. Das übergeordnete Div definiert „overflow:hidden“.

So löschen Sie Float in CSS

Die Betriebsumgebung dieses Tutorials: Windows7-System, CSS3- und HTML5-Version, Dell G3-Computer.

Floating führt dazu, dass das aktuelle Etikett nach oben schwebt, und wirkt sich auch auf die Positions- und Breitenhöhenattribute der vorderen und hinteren Etiketten sowie der übergeordneten Etiketten aus.

Und derselbe Code kann in verschiedenen Browsern unterschiedlich angezeigt werden, was das Löschen von Floats schwieriger macht.

Es gibt viele Möglichkeiten, durch Floats verursachte Probleme zu lösen, aber einige Methoden haben Probleme mit der Browserkompatibilität.

1. Höhe der übergeordneten Div-Definition

<!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>

Nach dem Login kopieren

Prinzip: Die manuelle Definition der Höhe des übergeordneten Divs löst das Problem, dass das übergeordnete Div die Höhe nicht automatisch ermitteln kann.

Vorteile: einfach, weniger Code, leicht zu beherrschen

Nachteile: Nur für Layouts mit fester Höhe geeignet, die genaue Höhe muss angegeben werden, wenn die Höhe vom übergeordneten Div abweicht.

2 am Ende Leeres Div-Tag klar: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>

Nach dem Login kopieren

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

Nach dem Login kopieren

Prinzip: Fügen Sie ein leeres Div hinzu und verwenden Sie „clear:both“, das durch CSS verbessert wurde, um den Float zu löschen, sodass das übergeordnete Div automatisch die Höhe erhalten kann

Vorteile: einfach, weniger Code , gute Browserunterstützung, Es ist nicht leicht, seltsame Probleme zu haben

Nachteile: Viele Anfänger verstehen das Prinzip nicht; wenn es viele schwebende Layouts auf der Seite gibt, werden viele leere Divs hinzugefügt, was den Leuten ein sehr unangenehmes Gefühl gibt

3. Pseudoklassen der übergeordneten Div-Definition: after und zoom

<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>

Nach dem Login kopieren

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

Nach dem Login kopieren

Prinzip: Nur IE8 und höher sowie Nicht-IE-Browser unterstützen :after. Das Prinzip ähnelt in gewisser Weise der Methode 2. zoom (IE-Konvertierung hat Attribute) kann das schwebende Problem von ie6 und ie7 lösen

Vorteile: Gute Browserunterstützung, nicht einfach. Es treten seltsame Probleme auf (derzeit: Wird von großen Websites wie Tencent, NetEase, Sina usw. verwendet)

Nachteile: Es gibt viele Codes , und viele Anfänger verstehen das Prinzip nicht, um die Verwendung von zwei Codezeilen in Kombination mit Mainstream-Browsern zu ermöglichen.

4. Überlauf der übergeordneten Div-Definition: ausgeblendet

<style type="text/css">
.div1{
    background:#000080;
    border:1px solid red;
    /*解决代码*/
    width:98%;
    overflow:hidden
}
.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>

Nach dem Login kopieren

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

Nach dem Login kopieren

Prinzip: Breite oder Zoom: 1 muss definiert werden, und die Höhe kann nicht definiert werden. Bei Verwendung von overflow:hidden prüft der Browser automatisch die Höhe des schwebenden Bereichs

Vorteile : Einfach, weniger Code, gute Browserunterstützung

Nachteile: Kann nicht mit Position verwendet werden, da die überschrittene Größe ausgeblendet wird.

Lernvideo-Sharing: CSS-Video-Tutorial

Das obige ist der detaillierte Inhalt vonSo löschen Sie Float in CSS. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!