CSS floating cleanup, do not use Clear:both tags _ experience Exchange

For example:

Some Content

Now preview this code and we'll find the outermost parent element float container, and it's not displayed. This is because the child element is floating and detached from the document stream, resulting in a parent element having a height of zero.
If you modify the code to:

Some Content


Notice that there is a bit more code to clean up the float. This is a good CSS code habit, but this method adds useless elements. Here's a better way to change the HTML code to:

Some Content

Defines a CSS class for "floating cleanup" control:
Copy CodeThe code is as follows:
. Clearfix:after {} {
Content: ".";
Clear:both;
height:0;
Visibility:hidden;
Display:block;
}/* This is the processing of Firefox, because Firefox supports the generation of elements, and all versions of IE do not support the generation of elements */
. Clearfix {} {
Display:inline-block;
}/* This is the processing of IE browser on MAC */
/**//* hides from Ie-mac \*/
* HTML. Clearfix {}{height:1%;}/* This is for the IE browser on Win * *
. clearfix {}{display:block;}/* This is a change made to Display:inline-block; reset to block element */
/**//* End Hide from Ie-mac */

At this point, previewing the above code (by deleting this comment) will find that even if the child element floats, the parent element, float container, will still surround it, making it highly adaptive.

