So löschen Sie Float in CSS

Die Möglichkeit, Float in CSS zu löschen, besteht darin, [overflow:auto] für das übergeordnete Element festzulegen. Sobald das Inhaltselement festgelegt ist, wird es gekürzt und die verbleibenden Elemente sind nicht sichtbar. Wir können Float auch löschen, indem wir ein leeres Tag hinzufügen oder das Pseudoelement [:after] verwenden.

Die Betriebsumgebung dieses Artikels: Windows 10-System, CSS 3, Thinkpad T480-Computer.

Lassen Sie uns zunächst über den Zweck des Löschens von Floats sprechen. Es geht nicht darum, die Floats selbst zu löschen, sondern die Floats von den Floating-Elementen zu befreien, die sie berühren, damit die Elemente hinter den Floating-Elementen ihre Floats nicht annehmen zu normal Der Fluss der Elemente wird angelegt.

Jetzt stellen wir Ihnen drei Möglichkeiten zum Löschen von Floats vor:

Der erste Weg:

Fügen Sie eine leere Beschriftung (div oder br usw.) hinzu und eliminieren Sie den Effekt von Float auf die folgenden Elemente durch das Clear: Both Aussageeinfluss.

<div class="main_left">.main{float:left;}</div>
<div class="side_left">.side{float:right;}</div>
<!--增加一个空标签-->
<div style="clear:both;"></div>
<div class="footer">.footer</div>

Nachteile: Es müssen viele bedeutungslose Tags hinzugefügt werden, was sich nachteilig auf die spätere Wartung auswirkt. Wenn es sich um ein kleines Programm handelt, ist das in Ordnung, aber wenn es sich um ein großes Projekt handelt, sollten Sie es mit Vorsicht verwenden.

Der zweite Weg: Verwenden Sie das :after-Pseudoelement

.clearIt { zoom:1; }
.clearIt:before;  
 /*加上before可以防止浏览器顶部的空白崩溃（就是上一个div的margin-bottom和下边的margin-top会发生叠加）*/
 .clearIt:after {
    content:".";
    display:block; 
    height:0;
    visibility:hidden; 
    clear:both; 
}
/*
display:block 使生成的元素以块级元素显示,占满剩余空间;
height:0 避免生成内容破坏原有布局的高度。
visibility:hidden 使生成的内容不可见，并允许可能被生成内容盖住的内容可以进行点击和交互;
通过 content:"."生成内容作为最后一个元素，至于content里面是点还是其他都是可以的，例如oocss里面就有经典的 content:"XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX",有些版本可能content 里面内容为空,一丝冰凉是不推荐这样做的,firefox直到7.0 content:”" 仍然会产生额外的空隙；
zoom：1 触发IE hasLayout。
*/

Der dritte Weg:

Setzen Sie overflow: auto für das übergeordnete Element ein

<!--为父元素设置overflow-->
<div class="wrap"  style="overflow:auto;">
<div class="wrap_main_left">.main{float:left;}</div>
<div class="wrap_side_left">.side{float:right;}</div>
</div>
<div class="footer">.footer</div>

Wenn das übergeordnete Element overflow: auto festlegt, wird das Inhaltselement über das hinaus gekürzt Element Unsichtbar.

Der Vorteil dieser Methode besteht darin, dass es keine strukturellen und semantischen Probleme gibt und die Codemenge sehr gering ist. Die Mängel sind jedoch auch sehr gravierend. Wenn der Inhalt zunimmt, kann der Inhalt leicht ausgeblendet werden, da er nicht automatisch umbrochen wird und Elemente, die überlaufen müssen, nicht angezeigt werden können.

Eigentlich nur klar: Beide dienen dazu, den Float-Einfluss zu eliminieren. Mehrere andere Methoden erreichen ihre eigenen Ziele, indem sie Inhalte verbergen.

Verwandte Lernvideofreigabe: CSS-Video-Tutorial

Das obige ist der detaillierte Inhalt vonSo löschen Sie Float in CSS. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!