What is the use of display, float and position in css

This article is about the usefulness of display, float and position in css. The editor thinks it is very practical, so share it with you as a reference and follow the editor to have a look.

Display is used to set the way elements are displayed

Display: block | none | inline | inline-block

Inline: specifies that the object is an inline element

Block: specify objects as block elements

Inline-block: specifies that the object is an inline block element

None: hiding object

Float controls whether elements are displayed floating or not

Float: none | left | right

None: sets objects not to float

Left: sets the object to float on the left

Right: sets the object to float on the right

Purpose of floating:

Is to break the default display rules for document streams. If you want the elements to be displayed in accordance with our layout requirements. At this point, take advantage of the float attribute

1. Any element declared as float is automatically set to a "block level element"

two。 In a standard browser, the floating element is separated from the document stream, so the element after the floating element occupies the position where the floating element should be.

3. If there is not enough space to hold the floating element horizontally, go to the next line

4. The text content surrounds the floating element

5. Floating elements can only float to the left or right

Clear clear float

Clear: none | left | right | both

None: default value. Allow floating objects on both sides

Left: floating objects are not allowed on the left

Right: floating objects are not allowed on the right

Both: floating objects are not allowed

How position objects are positioned

Position: static | absolute | fixed | relative

Static: default value. There is no positioning, and the object follows the regular flow. At this point, 4 positioning offset attributes will not be applied.

Relative: relative positioning, objects follow the regular flow, and offset with reference to their own position in the regular flow through the top,right,bottom,left these four positioning offset attributes will not affect any element in the regular flow

Absolute: absolute positioning, where the object deviates from the regular flow, where the offset attribute refers to the nearest positioning ancestor element, or all the way back to the body element if there is no positioning ancestor element. The offset position of the box does not affect any element in the regular flow, and its margin does not collapse with any other margin

Fixed: fixed positioning, consistent with absolute, but offset positioning is based on the window. When a scroll bar appears, the object does not scroll with it

Absolute description:

1. Detach from the document stream

two。 Positioning through top,bottom,left,right

3. If the parent element position is static, it will be positioned at the origin of body coordinates

4. If the parent element position is relative, it will be positioned as the parent element

Example: div {position: absolute; left:100px; top:100px;}

Relative description:

1. Relative positioning (relative to one's original position)

two。 Do not deviate from the document stream

3. Refer to your own static position and locate through top,bottom,left,right.

Example: div {position: relative; left:100px; top:100px;}

Fixed description:

Fixed positioning is actually a special form of absolute positioning. Fixed positioning elements are fixed relative to the browser window, not to their containing elements. Even if the page is scrolled, they will still be in exactly the same place in the browser window as before.

Example: div {position: fixed; right:0; bottom:0;}

Cascading order of z-index objects

Z-index: auto | number

When elements overlap, you can set the cascading order through the z-index attribute

Objects with higher number values are overwritten over objects with lower number values

Thank you for reading! This is the end of this article on "what is the use of display, float and position in css?". I hope the above content can be of some help to you, so that you can learn more knowledge. if you think the article is good, you can share it for more people to see!