What are the floating types in the CSS positioning mechanism?
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!
