Shulou(Shulou.com)05/31 Report--

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!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.