foreword
In order to better understand float and position, it is recommended to read this article I wrote "Html Document Flow and Document Object Model DOM Understanding"
text
1. Floating
The main purpose of CSS design float property is to achieve the effect of text wrapping around pictures. However, this property turns out to be the easiest way to create a multi-column layout.
How to float an element? First set its width width, and then add the style rule float:left/right.
//Note: The floated element has been removed from the normal document flow. Floating elements are elements that are ignored by block-level elements, but inline elements know where they are, inline elements pay attention to the boundaries of floated elements, and block elements flow normally to the page.
When it comes to floating, you have to mention clearing the floating. As shown below:
Because block-level elements are unaware of the existence of left-side floated elements (floating elements are not in the flow of the document), block-level elements fill the entire area. A request can be made with the CSS clear property of an element: when the element flows into the page, no floating content is allowed on the left, right, or sides of the element.
Add the style clear:left; so that the block element will be below the floated element.
To learn more about floats, see the example. "Three Ways to Surround Floating Elements"
2. position
The position property has 4 values: static, relative, absolute, fixed.
(1) static
The default for HTML elements, i.e. without positioning, the element appears in the normal flow. Statically positioned elements are not affected by top, bottom, left, right.
(二)relative
Relative to the element's original position in the document flow (or its default position). Relative positioning will allow the element to flow into the page normally, but will need to be offset before being displayed on the page.
//Note: The space originally occupied by this element is retained, and other elements have not changed their positions. Relatively positioned elements are often used as container blocks for absolutely positioned elements.
(3) absolute
Absolute positioning removes the element from the document flow. Block elements and inline elements are unaware of its existence. The positioning context of an absolutely positioned element is the nearest positioned parent element, whose default positioning context is the <body> element.
//Any ancestor element of an absolutely positioned element can become its positioning context, as long as the position of the corresponding ancestor element is set to relative/fixed.
(4) fixed
Fixed positioning removes the element from the document flow, block elements and inline elements are unaware of its existence, and its positioning context is the viewport.
ps: relative, absolute, and fixed have z-index attributes.