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

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!

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.