CSS three positioning general, floating, absolute positioning detailed introduction

This article describes the CSS three positioning general, floating, absolute positioning details

General flow, normal flow, document flow

Normal flow is displayed as follows

The elements are displayed in the normal corresponding element, row elements occupy one row, and block-level elements occupy one or more rows.

Brother two younger brother three brother by block level elements from top to bottom in order. This is a regular stream.

Floating

Floating, as the name implies, floats above the regular flow. Role: To solve the implementation of a row of multiple boxes (the General next box is only one row, multiple boxes accounted for multiple lines), and the box is highly controllable.

Floating characteristics: The floating elements will be aligned at the time of sorting.

Float:left;

Eldest brother does not float, so will be in the position of the second brother to align.

The float does not affect the standard flow, or the standard flow is in its original position. Here four younger brother does not have floating set of high very big, above a small line is Big Brother they to cover, but four younger brother is full of this big line. The other three younger brothers are floating on top of it.

So the float will cover the standard flow.

Floating sort Rules

When there are multiple floating and non-floating boxes appearing together on the page, the floating boxes will look for the floating boxes to align, and do not float to find the regular flow alignment.

Floating will change the way the element is displayed-the element will be displayed as: Inline-block;

Left and right only affect the position of the preceding floating element arrangement, and there are multiple elements floating in the same position, then floating on the other side will find the left float, and float to starboard.

What is floating on the basis of position?

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

Find floating elements that are resolved with floating rules. The position of the floating element is the position of its standard stream, which overrides the standard flow.

Absolute positioning