How to realize floating Diagram by CSS

This article mainly introduces CSS how to achieve floating icon, has a certain reference value, interested friends can refer to, I hope you can learn a lot after reading this article, the following let the editor take you to understand it.

Take a look at the following figure. When you float box 1 to the right, it leaves the document stream and moves to the right until its left edge meets the right edge of the pregnancy box:

Looking at the following figure, when Box 1 floats to the left, it leaves the document stream and moves to the left until its left edge meets the left edge of the search box. Since it is no longer in the document stream, it has no space, and actually covers box 2, making it invisible from the view.

If you move all three boxes to the left, then Box 1 floats to the left until it meets the search box, and the other two boxes float to the left until it touches the previous floating box.

As shown in the following figure, assuming that the collection box is too narrow to forgive the horizontal arrangement of the three floating elements, then the other floating blocks move down until there is plenty of space. If the height of floating elements is different, they are generally "stuck" by other floating elements as they move down:

Thank you for reading this article carefully. I hope the article "how to realize the floating Icon of CSS" shared by the editor will be helpful to everyone. At the same time, I also hope that you will support us and pay attention to the industry information channel. More related knowledge is waiting for you to learn!