CSS positioning: regular, floating, absolute, and css floating

CSS positioning: regular, floating, absolute, and css floating

 

Regular stream, normal stream, and Document Stream

The normal stream display mode is as follows:

Display according to the characteristics of the corresponding elements. The element in the row occupies one row, and the element in the block level occupies one or more rows.

The younger brother, younger brother, and younger brother are arranged from top to bottom by block-level elements. This is a regular stream.

Floating

As the name suggests, floating is floating above the regular stream. Purpose: solve the problem of placing multiple boxes in one row (normally the next box occupies only one row, and multiple boxes occupy multiple rows), and the box is highly controllable.

Floating: The floating elements are aligned above the sorting order.

Float: left;

The eldest brother is not floating, so it will be aligned with the second brother's position.

Floating will not affect the standard stream. The standard stream is still in the original position. Here, the four younger siblings are not very high in floating settings. The above small rows are covered by the eldest brother, but the four younger siblings fully occupy this big row. The other three are floating on it.

So floating will overwrite the standard stream.

 

Floating sorting rules

When multiple floating and non-floating boxes appear on the page, the floating box will find the floating box alignment, and the non-floating box will be alignment according to the regular flow.

Floating changes the display mode of the element. The display mode of the element is changed to inline-block;

Left and right will only affect the positions where the floating elements are arranged. If there are multiple floating elements in the same position, the left floating will find the left floating, the right floating, and the right floating.

What is the benchmark for floating?

If the floating element cannot be found, parse it as a standard stream

Find the floating element and parse it according to the floating rule. The position of the floating element is the location of the standard stream, which overwrites the standard stream.

Absolute Positioning