Deep understanding of CSS float and deep understanding of css

Deep understanding of CSS float and deep understanding of css
* Directory [1] define [2] features [3] To show [4] overlapping words

The earliest use of floating is from , which is used for text-surround image formatting. Today, floating is a common layout method in CSS. This article will introduce and sort out floating content in detail.

 

Definition

Float floating

The floating element leaves the normal stream, and then moves to the left or right in the specified direction, hitting the parent boundary or stopping another floating element.

Value: left | right | none | inherit

Initial Value: none

Apply to: All elements

Inheritance: None

[Note] If a non-replacement element is floating, a width must be declared for the element. Otherwise, the width of the element tends to be 0 according to CSS specifications.

 

Features

[1] floating stream

Elements in a normal stream are arranged one by one; floating elements also constitute a floating stream.

[2] block level Frame

The floating element itself generates a block-level box, and whatever the element itself is, the margin around the floating element will not be merged.

[3] package

A floating element's contained block refers to its closest block-level ancestor element. The floating element of future generations should not exceed the upper, left, and right boundary of the contained block. If the height of the contained block is not set, if the included block is floating, the included block will extend and contain all its child floating elements. If the width of the included block is not set, if the included block is floating, the block width is extended by floating elements of future generations.

[4] destructive

The floating element disconnects from the normal stream and destroys its row-box attribute, so that the height of the block element is collapsed, shortening the row-box next to the floating box, in this way, the floating box is provided with space and the row boxes are rearranged around the floating box.

Performance

[1] The left (or right) outer boundary of the floating element must be the right (left) outer boundary of the left floating (or right floating) element in the source document. Unless the top of the floating element appears later, the bottom of the floating element appears first.

[2] The right outer boundary of the left floating element is not on the right of the right outer boundary of the right floating element. The left outer boundary of the right floating element is not on the left of any left floating element.

[3] The left (or right) floating element has another floating element on the left (right). The former has a right outer boundary and cannot be on the right (left) of the block's right (left) boundary)

[4] the left (or right) outer boundary of a floating element cannot exceed the left (or right) inner boundary of its contained block

[5] the top of a floating element cannot be higher than the top of its parent element. If a floating element is placed between two merged margins, it is as if there is a block-level parent element between the two elements.

[6] the top of a floating element cannot be higher than that of any previous floating element or block-level element.

[7] if another element exists before a floating element in the source document, the top of the floating element cannot be higher than the top of any row box containing the box generated by this element.

[8] floating elements must be placed as high as possible

[9] The left floating element must be as far as possible to the left, and the right floating element must be as far as possible to the right. The higher the position, the farther to the right or to the left

 

Overlap

There are two ways to float an element beyond the boundary of the parent element: one is that the width of the floating element is greater than the width of the parent element, and the other is to set the negative margin. If the floating element has a negative margin and the floating element overlaps with the normal flow element

[1] when the line frame overlaps with a floating element, its border, background, and content are displayed on the floating element.

[2] When a block box overlaps with a floating element, its border and background are displayed under the floating element, while the content is displayed above the floating element.