How to clear the left and right floats of css

This article mainly introduces "how to clear left and right floating css". In daily operation, I believe many people have doubts about how to clear left and right floating css. Xiaobian consulted all kinds of information and sorted out simple and easy operation methods. I hope to help you answer the doubts about "how to clear left and right floating css"! Next, please follow the small series to learn together!

In CSS, you can use the clear attribute to clear the left and right float. The function of this attribute is to specify which side of the element is not allowed to float other elements. When the value of the attribute is "both," floating elements are not allowed on both sides of the element, that is, to clear the left and right float. The syntax is "element {clear:both;}."

Operating environment of this tutorial: Windows 10 system, CSS3 && HTML5 version, Dell G3 computer.

How does CSS clear left and right float?

In css, clearing left and right floats requires the clear attribute, which specifies which side of the element no other floating elements are allowed.

The clear attribute defines where floating elements are not allowed on an element. In CSS1 and CSS2, this is done by automatically adding an upper margin to the cleanup element (i.e., the element with the clear attribute set). In CSS 2.1, cleanup space is added above the margins on elements, while the margins themselves do not change. Either way, the end result is the same, if declared left or right cleared, the element's upper outer border will be just below the lower outer border of the floating element on that edge.

Of which:

Examples are as follows:

Output:

At this point, on the "css how to clear the left and right float" study is over, I hope to solve everyone's doubts. Theory and practice can better match to help everyone learn, go and try it! If you want to continue learning more relevant knowledge, please continue to pay attention to the website, Xiaobian will continue to strive to bring more practical articles for everyone!