Clarification of the use of display:inline; float:left;

Such a topic seems a bit ridiculous, but since many netizens in the standard learning process is often plagued by such problems ( example one , Case II ), so the special text to clarify the difference between the two and characteristics.

First of all, we need to be clear, display:inline and float:left, the right meaning. display:inline (inline) The text in the CSS authoritative guide shows that any visible element that is not a block-level element is an inline element. Its performance is the "Row layout" form, where the "row layout" means that its representation is always displayed in rows. For example, we set an inline element border-bottom:1px solid #000, and the performance is repeated in each row, with a black thread underneath each line. If it is a block-level element then the black line shown will only appear below the block.

Of course it does not look like Display:inline and float:left, but when we understand the nature of float:left, then we know what's going on. Float:left (left floating) He makes the specified element break out of the ordinary document stream, resulting in special layout features. and float must be applied to block-level elements, which means that floats are not applied to inline labels. Or in other words, when float is applied, the element is specified as a block-level element.

So it's clear that inline (display:inline;) elements cannot be set wide, because inline is a row layout and its attributes are laid out in a row, so it cannot be set wide.