The reason of flaot floating in css and how to solve it
This article mainly explains "the reasons for flaot floating in css and how to solve it". The content in the article is simple and clear, and it is easy to learn and understand. Please follow the editor's train of thought to study and learn "the reasons for flaot floating in css and how to solve it".
Causes and side effects of flaot floating
Four parameters in float
Left,right,none,inherit
Reasons for float floating
After using floats, the element deviates from the standard document stream. (standard document streams are arranged and displayed according to different types of elements, such as block elements, row elements according to their own characteristics, although the attributes are different, they are all arranged in the order from top to bottom and from left to right.)
Side effects of float floating
Two block-level elements that are overwritten by floating elements
Write the picture description here.
.box {
Border:4pxsolid#000000
Width:200px
Height:200px
Display:inline-block
}
.itemSmall _ 1 {
Background-color:chartreuse
Width:40px
Height:40px
Border:2pxsolid#000000
/ * float:left;*/
}
.itemSmall _ 2 {
Background-color:chartreuse
Width:40px
Height:40px
Border:2pxsolid#000000
Float:left
}
.itemBig {
Background-color:blue
Width:150px
Height:150px
Border:2pxsolid#000000
}
* one block element, one inline element. Inline elements such as text float around the floating element, making room for the floating element.
Write the picture description here.
.box {
Border:4pxsolid#000000
Width:200px
Height:200px
Display:inline-block
Vertical-align:top
}
.itemSmall _ 1 {
Background-color:chartreuse
Width:40px
Height:40px
Border:2pxsolid#000000
/ * float:left;*/
}
.itemSmall _ 2 {
Background-color:chartreuse
Width:40px
Height:40px
Border:2pxsolid#000000
Float:left
}
.itemBig {
Background-color:blue
Width:150px
Height:150px
Border:2pxsolid#000000
}
Inline element
* two block-level elements float and the parent element collapses
Write the picture description here.
.box {
Border:4pxsolid#000000
Float:left
}
.itemSmall _ 2 {
Background-color:chartreuse
Width:40px
Height:40px
Border:2pxsolid#000000
Float:left
}
.itemBig2 {
Background-color:blue
Width:150px
Height:150px
Border:2pxsolid#000000
Float:left
}
Thank you for your reading, the above is the content of "the reasons for flaot floating in css and how to solve it". After the study of this article, I believe you have a deeper understanding of the reasons for flaot floating in css and how to solve this problem, and the specific use needs to be verified in practice. Here is, the editor will push for you more related knowledge points of the article, welcome to follow!
