Heim >Web-Frontend >HTML-Tutorial >Wie lösche ich den Float? In HTML: Implementierung der Methode zum Löschen schwebender Elemente nach Pseudoelementen (Code)
Der Inhalt dieses Artikels befasst sich mit der Frage, wie man das Floating beseitigt. Die Implementierung der Methode zum Löschen schwebender Elemente von :after-Pseudoelementen in HTML (Code) hat einen gewissen Referenzwert. Freunde in Not können sich darauf beziehen.
Das :after-Pseudoelement und das :before-Pseudoelement werden verwendet, um Inhalte nach bzw. vor dem Element hinzuzufügen. Im eigentlichen Webentwicklungsprozess ist das :after-Pseudoelement häufiger Das verwendete Pseudoelement: after wird im Allgemeinen zum Löschen von Floats verwendet. Die Verwendung von Pseudoelementen zum Löschen von Floats ist eine der drei Methoden zum regulären Float-Clearing und auch die am häufigsten verwendete und empfohlene Methode.
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>:after清除浮动</title> <style> .out { width:200px; border: 5px solid red; } .out:after{ content: ''; display: block; width: 0px; height: 0px; clear: left; } .in { width: 100px; height: 100px; float:left; } </style> </head> <body> <div class="out"> <div class="in" style="background-color: blue;"></div> <div class="in" style="background-color: green;"></div> </div> </body> </html>
Der Effekt ist wie folgt:
Verwandte Empfehlungen:
Klare Floating-Einzelanwendung: nach Pseudo- element_html/ css_WEB-ITnose
html 6 Möglichkeiten zum Löschen schwebender Beispiele_CSS/HTML
Das obige ist der detaillierte Inhalt vonWie lösche ich den Float? In HTML: Implementierung der Methode zum Löschen schwebender Elemente nach Pseudoelementen (Code). Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!