CSS Layout: Similarities and Differences between Floating and Absolute Positioning_html/css_WEB-ITnose

Float ( float ) and absolute positioning ( position:absolute )

Same points: (1) They all float (leave the original position)

(2) And they don’t occupy the original position

(3) In addition, such as h1 For labels that contain text, if only height is set by default, its width will fill the width of the parent element. When it is floated or absolutely positioned, its width will be the width of the text in h1

Difference: after float, (here float:left)the object behind it will occupy its original position,

but the text in the following object will be Pictures, etc. seem to know that it is on the left, so they will automatically display behind it,

That is, the text, pictures, etc. of the objects behind will not be blocked by it

position:absolute After absolute positioning, the object behind it will also occupy its original position,

but the object behind it will be completely treated as if it does not exist, directly in the upper left corner Display,

That is, the upper left part of the object such as text and images will be blocked by it

By default (That is, h3 does not have floating or absolute positioning)

h3 is set to float

h3 is set to absolute positioning