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

This article mainly introduces "how to clear the floating layout of CSS". In the daily operation, I believe many people have doubts about how to clear the floating layout of CSS. The editor consulted all kinds of materials and sorted out simple and easy-to-use methods of operation. I hope it will be helpful to answer the doubts of "how to clear the floating layout of CSS". Next, please follow the editor to study!

When floating layouts and normal div co-exist, the following overlay occurs

Document # lside {height: 200px; background: red; float: left;} # rside {height: 300px; background: green; float: right;} # normal {height: 400px; background: blue;} I am the left, I am the right, I do not set the float

So if you don't want to be overwritten, clear the float.

Set the clear attribute on a normal element in CSS

When we add clear: left;, it means not to let the left float cover us.

# normal {height: 400px; background: blue; clear: left;}

At this point, the div floating on the left will be displayed under the floating div on the left, as shown in the figure:

At this point, the study on "how to clear the floating layout by CSS" is over. I hope to be able to solve your doubts. The collocation of theory and practice can better help you learn, go and try it! If you want to continue to learn more related knowledge, please continue to follow the website, the editor will continue to work hard to bring you more practical articles!

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.