Heim > Artikel > Web-Frontend > Wie lösche ich den Float? In HTML: Implementierung der Methode zum Löschen schwebender Elemente nach Pseudoelementen (Code)
Wie lösche ich den Float? In HTML: Implementierung der Methode zum Löschen schwebender Elemente nach Pseudoelementen (Code)
- 不言Original
- 2018-08-21 14:28:236067Durchsuche
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!