For example:
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:
Define CSS classes to control "floating cleaning":
.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.
![[Web front-end] Node.js quick start](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
