Shulou(Shulou.com)06/01 Report--

This article is to share with you about the floating types in the CSS positioning mechanism. The editor thinks it is very practical, so share it with you as a reference and follow the editor to have a look.

CSS has three basic positioning mechanisms: relative positioning, floating positioning and absolute positioning. Next, let's talk about the positioning code of the float.

A floating box can be moved left or right until its outer edge touches the border that contains the box or another floating box.

Because the floater is not in the normal stream of the document, the block box in the normal stream of the document behaves as if the floater does not exist.

1. When no floats are set:

Float

# main {

Border: 1px solid # 000

Padding:10px

}

.box {

Width: 200px

Height:100px

Border: 1px solid # F00

Margin:10px 0 0 30px

}

Box1

Box2

Box3

Css-- positioning

two。 When box1 is set to float to the left, it leaves the document stream and moves to the left until its left edge touches the left edge of the containing box. Because it is no longer in the document stream, it does not take up space and actually covers the box12, making the box12 disappear from the view.

Do not set float

# main {

Border: 1px solid # 000

Padding:10px

} .box {

Width: 200px

Height:100px

Border: 1px solid # F00

Margin:10px 0 0 30px

}

.box1 {

Float:left

}

Box1

Box2

Box3

Css-- positioning

3. When both are set to float, the box1 floats to the left until it hits the containment box, and the other two box float to the left until it touches the previous float box.

Do not set float

# main {

Border: 1px solid # 000

Padding:10px

Overflow: hidden

}

.box {

Width: 200px

Height:100px

Border: 1px solid # F00

Margin:10px 0 0 30px

Float: left

}

Box1

Box2

Box3

Css-- positioning

4. Clear the float, and to prevent the row box from enclosing the floating box, you need to apply the clear property to the box. The value of the clear property can be left, right, both, or none, which indicates which edges of the box should not be next to the floating box.

Thank you for reading! This is the end of this article on "what are the floating types in the CSS positioning mechanism?". 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!

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.