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

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

Text

A float is a state that is semi-detached from the document stream, and it is not completely detached from the document stream like absolute positioning.

Absolute positioning:

At this time, the div1 does not set the height. Although the height 100px is set in the div2, the div2 cannot support the height of the div1, because the absolute positioning is completely separated from the document stream, and the div1 cannot feel the div2 at all.

Floating: the first case

We set the float to the left in div2. If you don't clear the effect of div2 float in div1, you can't extend the height of div1, because div1 can't feel the float.

But when you clear the float, div1 can feel the float (equivalent to the float is now in the document stream), and the height will stretch.

There are two solutions.

Floating: the second case

Neuropathy yang madness

Because div2 can feel it here.

So display as you like; that is, the element before the floating element will not be affected

Floating: the third case

Neuropathy yang madness

Can not feel the existence of div2, then

It will be covered by floating, but it is not completely covered.

We can find out

The background is indeed covered, but

The text content is not overwritten, which is a strange thing about floats-floats do not overwrite the text in the document stream, but other properties do.

Solution method

Here you are

Set a clear:left; to clear the influence of the float, so that

Can feel the presence of (div2).

Neuropathy yang madness

At this point, the study of "floating detailed explanation of 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.