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

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

不言

Freigeben： 2018-08-21 14:28:23

Original

6115 Leute haben es durchsucht

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>

Nach dem Login kopieren

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!