Stellen Sie die Höhe für das vorherige übergeordnete Element ein. Hinweis: Schreiben Sie in der Enterprise -Entwicklung die Höhe nicht, wenn Sie dies können.
<! DocType html> <html lang = en> <kopf> <meta charset = utf-8> <title> d131_clearfloat </title> <style> .smallbox1 {width: 100px; Höhe: 100px; Hintergrundfarbe: Rot; Boder: 3px fest Schwarz; Rand: 5px; float: rechts;} .smallbox2 {width: 100px; Höhe: 100px; Hintergrundfarbe: Rot; Boder: 3px fest Schwarz; Rand: 5px;} .smallBox3 {width: 100px; Hintergrundfarbe: Rot; Boder: 3px fest Schwarz; Rand: 5px;} .smallBox3 {width: 100px; Höhe: 100px; Hintergrundfarbe: Rot; Boder: 3px fest Schwarz; Rand: 5px;} .smallbox4 {width: 100px; Höhe: 100px; Hintergrundfarbe: Rot; Boder: 3px fest Schwarz; Rand: 5px;} .smallbox5 {width: 100px; Höhe: 100px; Hintergrundfarbe: Rot; Boder: 3px fest Schwarz; Rand: 5px;} .smallbox6 {width: 100px; Höhe: 100px; Hintergrundfarbe: Rot; Körper: 3px fest schwarz; Rand: 5px;} .bigbox1, .bigbox2 { /*Breite: 400px;* / /*Breite: 400px;* / Hintergrundfarbe: grün; Grenze: 3px schwarz solide; } </style> </head> <body> <div class = bigbox1> <div class = smallbox1> </div> <div class = smallbox2> </div> <div class = smallbox3> </div> </div> <divclass = bigbox2> <div class = smallbox4> </div. DivBoBox5> </divbox2> </divbox2> <///////DivBox2> <///DivBox. class = smallbox5> </div> <div class = smallbox6> </div> </div> </body> </html> 2. Der zweite Weg, den Schwimmer zu löschenFügen Sie dem folgenden Attribut ein klares Attribut hinzu
Das klare Attribut nimmt den Wert an:
Keine: Der Standardwert wird genommen, sortiert nach den Sortierregeln schwebender Elemente (linker Float, um den linken Schwimmer zu finden, rechter Schwimmer, um den rechten Float zu finden)
Links: Suchen Sie nicht nach dem linken schwimmenden Element vorne
Rechts: Suchen Sie nicht nach dem richtigen schwimmenden Element vorne
Beide: Suchen Sie nicht nach den linken schwimmenden und schwebenden Elementen vorne
Zum Beispiel: Wir setzen nicht die Breite und Höhe der großen Box, die kleine Box unterstützt die große Box, aber die beiden großen Boxen werden aus diesem Grund in einer Reihe sein.
.smallbox1 {width: 100px; Höhe: 100px; float: links; Hintergrundfarbe: Rot; Grenze: 2px solide Schwarz; } .smallbox2 {width: 100px; Höhe: 100px; float: links; Hintergrundfarbe: Rot; Grenze: 2px solide Schwarz; } .smallbox3 {width: 100px; Höhe: 100px; float: links; Hintergrundfarbe: Blau; Grenze: 2px solide Schwarz; } .smallbox4 {width: 100px; Höhe: 100px; float: links; Hintergrundfarbe: Blau; Grenze: 2px solide Schwarz; } </style> </head> <body> <div class = bigbox1> <div class = smallBox1> </div> <div class = smallbox2> </div> </div> <div class = bigbox2> <div class = smallbox3> </div> <div class = smallbox4> </div> </div> </body>Wir verwenden das klare Attribut in der dritten kleinen Box, damit wir eine neue Zeile starten können (das vierte wird nicht benötigt, da der dritte sich neben dem vierten befindet), und wir benötigen nur den Code des dritten kleinen Box, um den Code zu ändern.
.SmallBox3 {Clear: links; Breite: 100px; Höhe: 100px; float: links; Hintergrundfarbe: Blau; Grenze: 2px solide Schwarz; }Hinweis: Das Margin -Attribut ist abgelaufen, und wir werden über die Methode sprechen, die das nächste Mal nicht abläuft.
3. Quellcode:D131_Clearfloat.html
D132_clearattribute.html
Adresse:
https://github.com/ruigege66/html_learning/blob/master/d131_clearfloat.html
https://github.com/ruigege66/html_learning/blob/master/d132_clearattribute.html
ZusammenfassenDie oben genannten sind zwei Möglichkeiten, die schwebende HTML zu löschen, die der Editor Ihnen vorstellt. Ich hoffe, es wird Ihnen hilfreich sein. Wenn Sie Fragen haben, hinterlassen Sie mir bitte eine Nachricht und der Editor wird Ihnen rechtzeitig antworten. Vielen Dank für Ihre Unterstützung auf der Wulin.com -Website!
Wenn Sie der Meinung sind, dass dieser Artikel für Sie hilfreich ist, drucken Sie ihn bitte nach. Bitte geben Sie die Quelle an, danke!