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

This article introduces how the floating way of CSS cleaning is, the content is very detailed, interested friends can use it for reference, hope to be helpful to you.

There are many ways for CSS to clean up floats, such as using the clear attribute that comes with the br tag, using the element's overflow, using an empty tag to set the clear:both, and so on. However, considering compatibility and semantics, we usually use the following code to clean up floats.

/ * Clean float * / .clearfix: after {visibility:hidden; display:block; font-size:0; content: "; clear:both; height:0;} .clearfix {zoom:1;}

The principle is to use in "advanced" browsers: the after pseudo-class adds a non-display:none invisible block to the floater and sets it clear:both to clean up the float. Add haslayout to the floater in ie6 and 7 to keep the floater high and affect the document flow normally.

The above code should be the mainstream way to clean up floats. Now Alipay uses this way. Now, Nicolas Gallagher has come up with a more concise solution:

.cf: before, .cf: after {content: "; display:table;} .cf: after {clear:both;} .cf {zoom:1;}

The principle is the same. Use the: after pseudo class to provide the clear:both after the floating block. The difference is that display: table is used to hide this white space. Instead of setting up

Visibility:hidden; height:0; font-size:0

This kind of hack.

What's worth noting here is the before pseudo-class. In fact, he's here to handle top-margin edge folding, which doesn't have much to do with cleaning up floats. But because floating creates a block formatting context, if there happens to be a margin-bottom on another element on a floating element and this floating element happens to have a margin-top, you should keep them from collapsing (although this is not common).

So much for sharing about the floating way of CSS cleaning. I hope the above content can be of some help to you and learn more knowledge. If you think the article is good, you can share it for more people to see.

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.