Beispiele für 6 Möglichkeiten zum Löschen von Floats in html_CSS/HTML

Was passiert, wenn display: inline-block verwendet wird:

Stellen Sie sicher, dass das Blockelement in einer Zeile angezeigt wird
Legen Sie die Breite und Höhe der Inline-Unterstützung fest
3. Zeilenumbrüche werden analysiert
4. Wenn nicht festgelegt, wird die Breite um den Inhalt erweitert
5. In IE6 und 7 werden Block-Tags unterstützt

Aufgrund des Inline-Block-Attributs wird analysiert, wenn Zeilenumbrüche (mit Lücke) erfolgen. Daher besteht die Lösung darin, Floating Float zu verwenden: links/rechts

Situation, die bei Verwendung von Float auftritt:

1 Lassen Sie das Blockelement in einem anzeigen Zeile
2. Stellen Sie sicher, dass das Inline-Element die Breite Height unterstützt
3. Wenn die Breite und Höhe nicht festgelegt sind, wird die Breite vom Inhalt unterstützt
4 , Sie können Floats verwenden, um Lücken zu schließen.)
5. Floats zu Elementen hinzufügen, wird vom Dokumentfluss getrennt und bewegt sich in eine bestimmte Richtung, bis es die Grenze des übergeordneten Elements erreicht oder ein anderes Floating-Element stoppt (der Dokumentfluss ist). die Position, die von anzeigbaren Objekten im Dokument eingenommen wird, wenn sie angeordnet sind)

Code kopieren Der Code lautet wie folgt:

div1

div2

span1
span2
< ;/body>

Im folgenden Code ist nur Box1 schwebend, sodass sich Box1 und Box2 überlappen. Wenn beide schwebend sind, gibt es keine Überlappung

Code kopieren Der Code lautet wie folgt:

< ;!DOCTYPE HTML>

Methoden zum Löschen von Floats:
1. Floats zum übergeordneten Element hinzufügen (in diesem Fall ist der übergeordnete Rand: 0 automatisch; wird nicht zentriert)

Code kopieren Der Code lautet wie folgt:

< head>


< style> ;
.box{ width:300px;margin:0 auto;border:10px solid #000; float:left;}
.div{ width:200px;height:200px;background:red;float:left ; }
/*
Float löschen
1. Float zum übergeordneten Element hinzufügen (nicht mehr zentriert)
*/

 

2. Fügen Sie display:inline-block; zum übergeordneten Element hinzu (wie Methode 1, nicht zentriert. Nur IE6 und 7 zentriert )

Code kopieren Der Code lautet wie folgt:

 

3. Fügen Sie

.clear{ height:0px unter dem schwebenden Element ;font hinzu -size:0;clear:both;} Unter IE6 hat das Blockelement jedoch eine Mindesthöhe, das heißt, wenn height

Code kopieren Der Code lautet wie folgt:

< ;html>



.box{ width:300px;margin:0 auto;border:10px solid #000;}
.div{ width:200px;height:200px;background:red;float:left;}
/*
Float löschen
1. Fügen Sie einen Float zum übergeordneten Element hinzu
2. Fügen Sie display:inline-block zum übergeordneten Element hinzu
3. Fügen Sie

hinzu schwebendes Element

.clear{ height:0px;font-size:0;clear:both;}
4. Fügen Sie

unter dem hinzu schwebendes Element */

 

   

5. Fügen Sie {zoom:1;}

:after{content:""; display:block;clear:both;}

Code kopieren

Der Code lautet wie folgt:

< div class="div">

6 .Overflow hinzufügen:auto;

Kopieren Sie den Code Der Code lautet wie folgt:

< div class= "box">