Detailed introduction to CSS three positioning regular, floating and absolute positioning

This article talks about the three CSS positioning conventions, floating, absolute positioningdetailed introduction

regular flow, ordinary flow Stream, document stream

The normal conventional flow display method is as follows

Display according to the normal corresponding element characteristics, inline Elements occupy one line, and block-level elements occupy one or more lines.

The eldest brother, the second brother, and the third brother are arranged in order from top to bottom according to block-level elements. This is the regular flow.

Floating

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

Characteristics of floating: Floated elements will be aligned above when sorted.

float:left;

## The eldest brother has no float, so he will be in the position of the second brother Alignment.

Floating will not affect the standard stream, and the standard stream is still in its original position. The fourth brother here does not have a floating setting and is very high. The small row above is covered by the eldest brother and the others, but the fourth brother occupies the entire row.

Others The three brothers are floating on its body.

So the float will be overlaid on the standard stream.

Floating sorting rules

When there are multiple floating and non-floating boxes together When appearing on the page, floating boxes will be aligned with floating boxes, and non-floating boxes will be aligned with non-floating boxes according to the normal flow.

Floating will change the display mode of the element - it will change the display mode of the element to: inline-block;

left and

right will only affect the arrangement of the previous floating elements Position, if there are multiple elements floating at the same position, then the left float will look for the left float, and the right float will look for the right float.

What is the position based on which float is floated?

If a floating element is not found, it will be parsed in the form of a standard stream.

If a floating element is found, it will be parsed according to floating rules. The position of the element after floating is the position of the standard stream where it is located, and it will overwrite the standard stream.

Absolute positioning

The above is the detailed content of Detailed introduction to CSS three positioning regular, floating and absolute positioning. For more information, please follow other related articles on the PHP Chinese website!