Example Analysis of floating and cleaning in css

This article mainly shows you the "sample analysis of floating and cleaning in css", which is easy to understand and clear. I hope it can help you solve your doubts. Let me lead you to study and learn the article "sample analysis of floating and cleaning in css".

Suppose you want a picture to float to the left of the text block, and you want the picture and text to be contained in another element with a background color and border. You might write the following code:

.news {background-color: gray; border: solid 1px black;}. News img {float: left;}. News p {float: right;}

Some text

In this case, a problem arises. Because the floating element is detached from the document stream, the div that surrounds the picture and text does not take up space.

How to make the surrounding element visually surround the floating element? You need to apply clear somewhere in this element:

Unfortunately, a new problem arises, and since there is no existing element to apply cleanup, we have to add an empty element and clean it up.

.news {background-color: gray; border: solid 1px black;}. News img {float: left;}. News p {float: right;}. Clear {clear: both;}

Some text

This can achieve the desired effect, but you need to add extra code. There are often elements that can apply clear, but sometimes you have to add meaningless tags for layout purposes.

The above is all the content of the article "sample Analysis of floating and cleaning in css". Thank you for reading! I believe we all have a certain understanding, hope to share the content to help you, if you want to learn more knowledge, welcome to follow the industry information channel!