A brief introduction to floating properties in CSS

To introduce the float float property of CSS, you must first look at the standard document flow

Standard document Flow:

In the absence of CSS intervention, block-level elements of a single row, you can set the width of the height, the elements of the row side, the width of high auto-fill.

The standard document flow for HTML pages (the default layout) is: From top to bottom, from left to right, with blocks (block-level elements) wrapped.

Float Float Property The first use is to enable the target content to be wrapped in the text that is often seen in the newspaper, and later mostly used to achieve the content of the horizontal side-by-side arrangement,

Floating layer: After assigning a value to the float property of an element, it is out of the document flow, floating around the left and right border of the parent element (the default is the body text area).

The properties of float are described in:

Left: the element floats to the left.

Right: the element floats to the left.

Characteristics of float:

"1" child floats cause parent height collapse, workaround: 1. Add a height of 2 to the parent again. Use Overflow:hidden

"2" Floating package Sex:

block-level elements: parcel to the content area, no longer a full line, but also the length, length and content of the same length, and the body is still block-level elements;

Inline elements: Setting a float changes the display property to make it a block-level element and can be set to a wide height.

"3" element floats do not pass through the padding area

A "4" float causes elements to be left out of the document flow affecting other elements.