CSS authoritative guide-floating and positioning

Floating and positioning-floating and positioning

The purpose of floating and positioning is layout. Let's talk about floating.

Floating

CSS1 first mentioned floating. You can make the picture float by declaring it since Netscape1. For example , let the other content around the image. The word floating is derived from the extension of the html2.0.

The align of the picture is actually the floating effect of the picture.

After that, any element in the CSS can float.

Floating is to the left/right as much as possible

Value of float left right none inherit

Floating elements

Whether the float allows the document to be removed from the normal flow or affects the layout.

One element floats, and the other elements wrap around the element.

The margin of a floating element does not merge with the margins of other elements, that is, the margin does not merge.

The floating element must explicitly represent a width, otherwise the default is no width.

Floating in detail

The containing block of the floating element is the nearest ancestor element.

A inline element becomes a block-level element when it floats.

---

The bounds of the floating element do not exceed the inner bounds of the containing block.

The left (right) boundary of a floating element must be the right (left) boundary of the previous element, unless the floating element appears below. (i.e., floating elements in one Direction do not overlap)

Left floating and right floating elements do not overlap.

A floating element is no higher than the parent element. If the floating element is in the margin of a merge, then the floating element will appear to have a block level element with the following element. Lest the floating elements go up to the top. This one is more interesting.

The floating element is no higher than the previous element.

A floating element cannot be higher than the row box that contains it. For example, there is an IMG floating in a paragraph, and the floating img can only be as high as the previous row box.

The floating element cannot exceed the containing element.

Floating elements must be as high as possible.

Left (right) as far as left (right)

CSS authoritative guide-floating and positioning