CSS-Floating-Reinigung, verwenden Sie nicht den Austausch „clear:both tag_Experience'.

WBOY

Freigeben： 2016-05-16 12:05:25

Original

1429 Leute haben es durchsucht

Zum Beispiel:
40px;background:#EEE; "> Einige Inhalte

Wenn wir uns diesen Code jetzt ansehen, werden wir feststellen, dass das äußerste übergeordnete Element Float-Container, wird nicht angezeigt. Dies liegt daran, dass das untergeordnete Element schwebend ist und vom Dokumentfluss abweicht, wodurch die Höhe des übergeordneten Elements Null wird.
Wenn Sie den Code wie folgt ändern:
width:30%; height:40px;background:#EEE; ">Some Content

;
Beachten Sie, dass es einen zusätzlichen Teil gibt Code zum Bereinigen von Floats. Dies ist eine gute CSS-Codierungspraxis, aber dieser Ansatz fügt nutzlose Elemente hinzu. Hier ist eine bessere Möglichkeit: Ändern Sie den HTML-Code wie folgt:

div style="float:left; width:30%; height:40px;background:#EEE; ">Einige Inhalte

Steuerelement „Float Cleanup“:

Code kopieren

Der Code lautet wie folgt: .clearfix:after {} { content: "."; klar: beide; Höhe: versteckt; Anzeige: Block

} /* Dies ist für Firefox-Verarbeitung, da Firefox generierte Elemente unterstützt, aber nicht alle Versionen von IE unterstützt generierte Elemente */

.clearfix {}{ 
 display: inline-block Vom Browser durchgeführte Verarbeitung */ 
/**//* Versteckt vor IE-mac */ 
* html .clearfix {}{ height: 1%;} /* Dies ist die Verarbeitung, die im IE-Browser unter Win ausgeführt wird */ 
.clearfix {}{display: block;} /* Dies ist eine Änderung an display: inline-block;, zurückgesetzt auf Blockelement*/ 
/**//* End hide from IE-mac */ 


Wenn Sie zu diesem Zeitpunkt eine Vorschau des obigen Codes anzeigen (diesen Kommentar löschen), werden Sie feststellen, dass dies auch dann der Fall ist, wenn das untergeordnete Element vorhanden ist Floated, der Float-Container des übergeordneten Elements umgibt es weiterhin und führt eine Höhenanpassung durch.

Verwandte Etiketten：

CSS，浮动清理，clear:both

Quelle：php.cn

Vorheriger Artikel：Implementierungscode für die CSS-Textabfangfunktion Nächster Artikel：Das Textfeld CSS schließt die Eingabemethode_Erfahrungsaustausch

Erklärung dieser Website

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

Neueste Artikel des Autors