CSS floating tip You don't know

Previous words

The first use of the float is from

Defined

float float

Floating elements break out of the normal stream and then move left or right in the specified direction, touching the parent boundary or another floating element to stop

Value: Left | Right | none | Inherit

Initial value: None

Applies to: all elements

Inheritance: None

[note] If you float a non-replacement element, you must declare a width for the element, otherwise, the width of the element tends to be 0 according to the CSS specification

Characteristics

"1" floating stream

The elements in the normal flow are arranged one after the other, and the floating elements form a floating flow.

"2" block-level box

The floating element itself generates a block-level box, regardless of the element itself, so that the margins around the floating element are not merged

"3" Wrap Sex

The inclusion block of a floating element refers to its nearest block-level ancestor element, and the descendant floating element should not exceed the top, left, and right boundaries of the containing block. If you do not set the height of the containing block, if the containing block floats, the containing block will extend to include all its descendants floating elements, and if the width of the containing block is not set, if the containing block is floating, the containing block width is open by the descendant floating elements

"4" destructive

Floating elements break out of normal flow and break their own line-box properties so that they contain the height of the block element collapses, so that the row box next to the floating box is shortened to make room for the floating box, the row box is 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 that appears before the source document. Until the top of the floating element appears below the bottom of the floating element

[2] The right outer boundary of the left floating element does not go to the right of the left outer boundary of the right floating element on its right. The left outer boundary of the right floating element is also not left on the right outer boundary of any left floating element on its left side

[3] Left (or right) floating element left (right) there is another floating element, the former right outer boundary cannot be the right (left) boundary of its containing block (left)

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

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

[6] The top of a floating element cannot be higher than the top of all previously floating elements or block-level elements

[7] If another element appears before a floating element in the source document, the top of the floating element cannot be higher than the top of any row box that contains the generated box for that element

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

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

Overlapping

Floating elements go beyond the bounds of the parent element in two ways: one is that the width of the floating element is greater than the width of the parent element, and the other is to set a negative margin. If a floating element has a negative margin, and the floating element overlaps the normal flow element

When the "1" inline box overlaps a floating element, its border, background, and contents are displayed above the floating element

When the "2" block box overlaps a floating element, its border and background are displayed below the floating element, and the content is displayed above the floating element

"Recommended"

1. Free CSS Online video tutorial

2. CSS Online Manual

3. php.cn Lonely Nine-base (2)-css video tutorial