The difference between float and position attributes in CSS layout

CSS Layout - position Property

The position attribute specifies the type of positioning method (static, relative, fixed, absolute, or sticky) to be applied to an element.

The position property

The position attribute specifies the type of positioning method to be applied to an element.

There are five different position values:

static
relative
fixed
absolute
sticky

Elements are actually positioned using the top, bottom, left, and right attributes. However, these properties have no effect unless the position property is set first. They work differently depending on the position value.

CSS Layout - Floating and Clearing

float property
The float property is used to position and format content, such as floating an image to the left of text in its container.

The float property can be set to one of the following values:

left - the element floats to the left side of its container
right - the element floats to the right of its container
none - The element will not float (will appear where it would appear in the text). default value.
inherit - an element inherits the float value of its parent. In its simplest form, the float property can be used to create the effect of text surrounding an image (in a newspaper).

float: left|right; can automatically arrange and wrap lines, but requires clear to clear the float; display: inline-block can sometimes replace float to achieve the same effect.

position: absolute|relative; To coordinate with top, left and other positioning;

use:

position: absolute will cause the element to be out of the document flow. The positioned element does not occupy any position in the document and is presented on another layer. The z-index can be set. The layer effect of PS is position: absolute.
Float will also cause the element to leave the document flow, but still occupy a position in the document or container, squeezing the document flow and other float elements to the left or right, and may cause line breaks. The text wrap layout effect of the image is float.
The inline-block of display does not leave the document flow, and the block element is embedded in the document flow as a large character, similar to the default effect of img or input.

The difference between CSS layout float and positioning attributes

CSS has three basic positioning mechanisms: normal flow, floating and absolute positioning. 1. Normal flow The position of the element box in the normal flow is determined by the position of the element in XHTML. Block-level elements are arranged from top to bottom, and the vertical distance between boxes is calculated by the vertical margin of the box. Inline elements are laid out horizontally in a row. Normal flow is the elements in the HTML document, such as block-level elements and inline elements, according to their display attributes in the document.

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

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

The biggest difference between the two is position retention.

People use this difference to create a sliding door menu using CSS code.

123WORDPRESS.COM Editor Added

Generally, float is used for page layout, but you need to pay attention to clearing the float. Some special effects generally use position. Elements using position can appear anywhere on the page, which is convenient for some prompt boxes, special effects, etc.

Specifically, you can click F12 on the page you see and study it slowly, and you will find a lot of fun.