float: links; Mehrdeutigkeit - CSS

Question

float: links; Mehrdeutigkeit - CSS

8

Nehmen wir zwei Bilder als Beispiel

Mit float: left;

Ohne float: left;

HTML

%Vor%

CSS

%Vor%

Frage

Warum ohne float: left; text (Anmeldung) geht nach unten? Was ist die Wissenschaft dahinter?

html css

Junaid 13.05.2015, 09:41

quelle

1 Antwort

Tags und Links html css

Django: Verwenden von Annotate, Count und Distinct in einem Queryset Ember CLI mit mehreren Proxies

score 6 · Accepted Answer

Der Standardanzeigemodus eines Pseudoelements ist display: inline; und die standardmäßige vertikale Ausrichtung ist vertical-align: baseline; . Dies bedeutet, dass das Bild an der Grundlinie des Textes ausgerichtet wird.

Wenn Sie float an ein Element setzen, wird der Anzeigemodus display: block; und es wird aus dem Dokumentfluss entfernt. Die vertikale Ausrichtung ist kein Faktor mehr und in diesem Fall ist die obere Kante von span nun mit der oberen Kante des floatenden Pseudoelements ausgerichtet.

Wie Luis P. A. und Paulie_D in den Kommentaren darauf hinweisen, erlaubt die Änderung der vertikalen Ausrichtung, dass das nicht-schwebende Pseudo-Element zur Mitte des Textes ausgerichtet wird:

%Vor% %Vor%