display:inline; und float:left;_CSS/HTML verstehen

Zunächst müssen wir die korrekte Bedeutung von display:inline; und float:left; klären. display: inline; (inline) „CSS Definitive Guide“ Chinesische Textanzeige: Jedes sichtbare Element, das kein Element auf Blockebene ist, ist ein Inline-Element. Das Merkmal seiner Leistung ist die Form des „Zeilenlayouts“. Das „Zeilenlayout“ bedeutet hier, dass seine Ausdrucksform immer in Zeilen angezeigt wird. Wenn wir beispielsweise ein Inline-Element border-bottom:1px solid #000; festlegen, wird es in jeder Zeile wiederholt und unter jeder Zeile befindet sich eine dünne schwarze Linie. Wenn es sich um ein Element auf Blockebene handelt, erscheint die angezeigte schwarze Linie nur unterhalb des Blocks.

Natürlich scheint dies nicht der Unterschied zwischen display:inline; und float:left; zu sein, aber wenn wir die Eigenschaften von float:left; verstehen, werden wir verstehen, was vor sich geht. float:left; (left float) ist eine spezielle Layoutfunktion, die bewirkt, dass das angegebene Element aus dem normalen Dokumentfluss ausbricht. Und FLOAT muss auf Elemente auf Blockebene angewendet werden, was bedeutet, dass Floating nicht für Inline-Tags gilt. Mit anderen Worten: Wenn FLOAT angewendet wird, wird dieses Element als Element auf Blockebene bezeichnet.

Dann ist uns ganz klar, dass Breite und Höhe nicht für Inline-Elemente (display:inline;) festgelegt werden können, da Inline zum Zeilenlayout gehört und seine Eigenschaft darin besteht, in einer Zeile angeordnet zu werden, also Breite und Höhe kann nicht eingestellt werden.