About float and position_html/css_WEB-ITnose in CSS

position:relative is the relative positioning of child block-level elements to parent elements. The positioning keywords use left/right/top/bottom. The sibling block elements are positioned relative to each other, but after the position is moved, the original position is still retained. And subsequent positioning of sibling block elements is based on the position before being removed.

float:right/left is the positioning of the sub-block-level element flow collection towards the parent element, and the positioning keywords use margin/padding. The relative positioning between sibling block elements is re-rendered based on the new position after movement. They can overlap and the original position is cleared.

The biggest difference between the two is position reservation.

float positioning:

• li1


• li2


• li3

position: relative positioning:

• li1


• li2

< li id=li3>li3

Run them separately to check the running effect.