CSS floating cleaning, do not use the clear:both tag_Experience exchange

For example:
 

 

Some Content

Previewing this code at this time, we will find that the outermost parent element, float container, is not displayed. This is because the child element is floated and breaks away from the document flow, causing the height of the parent element to be zero.
If you modify the code to:
 

 

Some Content

                                                                                            Floating code. This is a good CSS coding practice, but this approach adds useless elements. Here is a better way, modify the HTML code to:
 

 

Some Content

Define CSS classes to control "floating cleaning":

Copy code The code is as follows:

.clearfix:after {}{
content: ".";
clear: both;
height: 0;
visibility : hidden;
display: block;
} /* This is a process for Firefox, because Firefox supports generating elements, but all versions of IE do not support generating elements */
.clearfix {}{ display: inline-block;
} /* This is the processing of IE browser on Mac */
/**//* Hides from IE-mac \*/
* html .clearfix {}{height: 1%;} /* This is the processing for the IE browser on win */
.clearfix {}{display: block;} ;Reset modifications to block elements*/
/**//* End hide from IE-mac */

At this point, preview the above code ( Delete this Note ), you will find that even if the child element is floated, the parent element float container will still surround it and perform height adaptation.