A brief introduction to floating properties in CSS

To introduce the floatfloating attribute of css, you must first understand the standard document flow

Standard document flow:

Without the intervention of CSS, block-level elements occupy one line alone. The width and height can be set. Inline elements are displayed side by side, and the width and height are automatically filled.

The standard document flow (default layout) of an HTML page is: from top to bottom, from left to right, with line breaks when encountering blocks (block-level elements).

The initial use of the float attribute was to wrap the target content in text, which is often seen in newspapers. Later, it was mostly used to realize the horizontal arrangement of content side by side. ,

Floating layer: After assigning a value to the float attribute of the element, it is separated from the document flow and floats left and right, close to the left and right borders of the parent element (default is the body text area).

float attribute introduction:

left: The element floats to the left.

#right: The element floats to the right.

Characteristics of floating:

[1] The floating child level causes the height of the parent level to collapse. Solution: 1. Add the parent level again A height 2. Use overflow: hidden

【2】Floating wrapping:

block Level element: is wrapped into the content area and no longer occupies a whole line, but it still has the same length as the content, and the body is still a block-level element;

Inline element: After setting the float, the display attribute will be changed, making it a block-level element, and the width and height can be set.

【3】Floating elements will not pass through the padding area

【4】Floating elements will leave the document Flow affects other elements.

The above is the detailed content of A brief introduction to floating properties in CSS. For more information, please follow other related articles on the PHP Chinese website!