How to use the float and position attributes in CSS
This article focuses on "how to use the float and position attributes in CSS". Interested friends may wish to take a look. The method introduced in this paper is simple, fast and practical. Let's let the editor learn how to use the float and position attributes in CSS.
The most commonly used properties for CSS layouts are float (floating) and position (positioning)
Start with the basics of the float (floating) and position (positioning) properties:
Float (floating) property:
Float:none | left | right
Value of ◆:
None: default value. The object does not float
Left: text flows to the right of the object
Right: text flows to the left of the object
An instance of the float (floating) property (one row and two columns):
ExampleSourceCode
Xhtml Code:
This is the * column. This is the second column.
CSS Code:
# wrap {width:100px;margin:0auto;} # column1 {float:left;width:40px;} # column2 {float:right;width:60px;} .clear {clear:both;}
Position (positioning) attribute:
Position:static | absolute | fixed | relative
Value of ◆:
◆ static: default value. No special positioning, objects follow HTML positioning rules
◆ absolute: drag objects from the document stream, using properties such as left,right,top,bottom
Absolute positioning relative to its nearest parent object with the most positioning settings.
If such a parent object does not exist, it depends on the body object. The cascading is defined by the z-index attribute
◆ fixed: not supported. Object positioning follows the absolute (absolute) mode. But obey some norms.
◆ relative: objects cannot be cascaded, but will be offset in the normal document stream based on attributes such as left,right,top,bottom
An instance of the position property (one row and two columns):
ExampleSourceCode
Xhtml Code:
This is the * column. This is the second column.
CSS Code:
# wrap {position:relative;width:300px;} # column1 {position:absolute;top:0;left:0;width:200px;} # column2 {position:absolute;top:0;right:0;width:100px;}
The difference between float (floating) and position (positioning) properties
Obviously, float is relatively positioned and will change with the size and resolution of the browser, while position is not, so it is usually still the float layout! Position may be used locally for positioning!
At this point, I believe you have a deeper understanding of "how to use the float and position properties in CSS". You might as well do it in practice. Here is the website, more related content can enter the relevant channels to inquire, follow us, continue to learn!
