CSS7---Floating positioning, alignment (Float,align)

float, float

In the horizontal direction of the element, the left,right floats until the outer frame touches the border of the parent edge box or another floating element

The float has no effect on the front element, the following element surrounds it, floats right, the next element surrounds it to the left, floats to the left, and the back element surrounds its right.

When an element floats, it does not affect the layout of the block-level box and only affects the arrangement of the inline box (usually text), and the normal flow in the document behaves as if the floating box does not exist.

When the floating box height exceeds the inclusion box, the inclusion box does not automatically stretch to close the floating element ("height collapse" phenomenon). As the name implies, is floating on the ordinary stream, like a cloud, but only left and right floating.
It is precisely because of this characteristic of the float that the element that belongs to the normal flow is floating, and the inside of the box contains no other ordinary flow elements, it shows a height of 0 (height collapse). In the actual layout, this is often not what we want, so we need to close the floating element so that its inclusion box shows its normal height.

Several floating elements adjacent, if there is space, then adjacent to each other, if there is not enough space, then the "row" floating

Clear floating, with clear

Align, align

Includes text alignment, element alignment in the parent container, alignment of elements in the element

Center alignment: Using the Margin property

Margin:auto;
width:70%;

Align Left and right: Use the Position property

Position:absolute;
right:0px;
width:300px;

Using the Float property

Float:right;
width:300px;

CSS7---Floating positioning, alignment (Float,align)