Einführung in klare Floats und geschlossene Floats

Dieser Artikel bietet Ihnen eine Einführung in das Clearing von Floats und die Schließung von Floats. Ich hoffe, dass er Ihnen als Referenz dienen wird.

Warum sollten wir den Float löschen?

• Untergeordnetes Element float:left; Das Verlassen des Dokumentflusses führt dazu, dass das übergeordnete Element zusammenbricht (nicht möglich). halten)

• Das übergeordnete Element wird von den untergeordneten Elementen unterstützt

• Clear float clear:both

<h1>清除浮动</h1>
<div class="border-div clear">
    <div class="div1">
        
    </div>
    <div class="div2">
        
    </div>
</div>


// 伪元素 :after
.clear:after{
    clear:both;
    content:".";
    display:table;
    width:0;
    height:0;
    visibility:hidden;
}

• Geschlossener Float – zusätzliche Elemente hinzufügen, clear:both

Das übergeordnete Element legt die Höhe nicht fest

子元素 float:left

额外增加元素 clear:both

<div class="main">
    <div class="sub"></div>
    <div class="sub"></div>
    <div style="clear:both"></div>
</div>

• Geschlossener Float – verwenden Sie br und seine eigenen HTML-Attribute

==Note== clear=all Veraltete Attribute (moz)

<div class="main">
    <div class="sub"></div>
    <div class="sub"></div>
    <br clear="all">
</div>

• Geschlossener Float – Das übergeordnete Element legt overflow:hidden

<div class="main">
    <div class="sub"></div>
    <div class="sub"></div>
</div>

• Geschlossener Float – Das übergeordnete Element legt display:table

fest

<div class="main">
    <div class="sub"></div>
    <div class="sub"></div>
</div>

Das obige ist der detaillierte Inhalt vonEinführung in klare Floats und geschlossene Floats. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!