Understanding display:inline; and float:left;_CSS/HTML

First of all, we need to clarify the correct meanings of display:inline; and float:left;. display: inline; (inline) "CSS Definitive Guide" Chinese text display: Any visible element that is not a block-level element is an inline element. The characteristic of its performance is the form of "row layout". The "row layout" here means that its form of expression is always displayed in rows. For example, when we set an inline element border-bottom:1px solid #000;, it will be repeated in each line, and there will be a thin black line below each line. If it is a block-level element, the black line displayed will only appear below the block.

Of course, this doesn’t seem like the difference between display:inline; and float:left;, but when we understand the characteristics of float:left;, we will understand what is going on. float:left; (left float) is a special layout feature that causes the specified element to break away from the ordinary document flow. And FLOAT must be applied to block-level elements, which means floating does not apply to inline tags. Or in other words when FLOAT is applied then this element will be designated as a block level element.

Then we are very clear, the width and height cannot be set for inline (display:inline;) elements, because inline belongs to line layout, and its characteristic is to be laid out in one line, so the width and height cannot be set.