Deep understanding of float float

First, the characteristics of floating

The original design of float was originally designed for the text wrapping effect only .

Properties of float: wrapping and destruction

The parcel has three behaviors and manifestations : Contraction (horizontal contraction), firmness, isolation.

can describe the image :

Other situations with a wrapper, such as:

Dispaly:inline-block/table-cell/...

Position:absolute/fixed/sticky

Overflow:hidden/scroll

Destruction when an element is floated, such as Float:left, the element is left, and the parent container be destroyed (highly collapsed) . But the float makes the height collapse not a bug but a standard

Can describe the image:

Other cases of vandalism are:

Display:none

Position:absolute/fixed/sticky

Give a picture example to illustrate the floating effect:

Here the blue envelopes represent the inline boxes elements such as text or pictures, and the invisible inline boxes height line is formed. When the picture is floating, it will break out of the box, and then due to the floating characteristics of the offset into:

So the picture from the inline boxes chain, by the impact of their own anti-counterfeiting properties (left), with its "wrapping", the width of the entity is still present, plus with the text in the consent document flow, the text will not overlap with the picture position, add the piece does not have inline boxes, height loss, Formation of a new inline boxes height enveloping line

Deep understanding of float float