For example:
<div style= "background: #666;" > <!--float container-->
<div style= "Float:left; width:30%; Height:40px;background: #EEE; ">some content</div>
</div>
Previewing this code at this point, we will find that the outermost parent element float container is not displayed. This is because the child element is floating, leaving the document stream, causing the parent element's height to be zero.
If you modify the code to:
<div style= "background: #666;" > <!--float container-->
<div style= "Float:left; width:30%; Height:40px;background: #EEE; ">some content</div>
<div style= "Clear:both" ></div>
</div>
Notice that there is a bit more to clean up the floating code. This is a good CSS code habit, but this approach adds useless elements. Here's a better way to modify the HTML code to:
<div class= "Clearfix" style= "background: #666;" > <!--float container-->
<div style= "Float:left; width:30%; Height:40px;background: #EEE; ">some content</div>
</div>
Define a CSS class for "floating cleanup" control:
Copy Code code as follows:
. Clearfix:after {} {
Content: ".";
Clear:both;
height:0;
Visibility:hidden;
Display:block;
/* This is a process for Firefox because Firefox supports the generation of elements and all versions of IE do not support the build element * *
. Clearfix {} {
Display:inline-block;
/* This is the processing of IE on the MAC * *
/**//* hides from Ie-mac \*/
* HTML. Clearfix {}{height:1%} /* This is the deal with the IE browser on Win * *
. clearfix {}{display:block} /* This is a change to Display:inline-block, reset to block elements * *
/**//* End Hide from Ie-mac * *
At this point, previewing the above code (by deleting this annotation), you will find that the parent element float container still surrounds it and is highly adaptive even if the child element is floating.
