CSS layout: Similarities and Differences between float and absolute positioning, and between css layout float

CSS layout: Similarities and Differences between float and absolute positioning, and between css layout float

Float and absolute position (position: absolute)

Similarities:(1) They all float (leaving the original location)

(2) and do not occupy the original location

(3) In addition, for example, if the label of the h1 packet text is set to height by default, its width is full of the width of the parent element. When it is floating or absolutely positioned, its width is the width of the text in h1.

Difference: After float, (here float: left)The object after it occupies its original location,

But the text and images in the following objects seem to know that they are on the left, so they will be automatically displayed behind them,

That is, the text images of the following objects will not be blocked by it.

Position: After absolute is absolutely positioned,The object after it also occupies its original location,

But the following object does not exist. It is directly displayed in the upper left corner,

That is, the upper left part of the text image of the subsequent object will be blocked by it.

By default (that is, h3 does not have float or absolute positioning)

When h3 is float

When h3 is absolutely positioned