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:236065Durchsuche

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: &#39;&#39;;
                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:

Wie lösche ich den Float? In HTML: Implementierung der Methode zum Löschen schwebender Elemente nach Pseudoelementen (Code)

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!

Stellungnahme:
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn