CSS: floating cleaning, clear: Both label is not used)

During floating layout, most people know that floating cleaning is necessary: <Div style = "clear: Both;"> </div>.
For example:
<Div style = "Background: #666;"> <! -- Float container -->
<Div style = "float: Left; width: 30%; Height: 40px; Background: # Eee;"> some content </div>
</Div>
Preview the code and we will find the parent element of the outermost layer.Float containerIs not displayed. This is because the child element is floating and is out of the Document Stream, resulting in the parent element's height being zero.
If you change the code:
<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>
Note that there is an additional code to clear the floating. This is a good CSS code habit, but this method adds useless elements. Here is a better way to change the HTML code:
<Div class = "Clearfix" style = "Background: #666;"> <! -- Float container -->
<Div style = "float: Left; width: 30%; Height: 40px; Background: # Eee;"> some content </div>
</Div>
Define the CSS class for "floating cleaning" control:

. Clearfix: After {
Content :".";
Clear: both;
Height: 0;
Visibility: hidden;
Display: block;
}
. Clearfix {
Display: inline-block;
}

* Html. Clearfix {}{ Height: 1% ;}
. Clearfix {}{ display: block ;}

In this case, preview the above Code (delete this annotation) and you will find that even if the child element is floating, the parent ElementFloat containerIt will still be surrounded and highly adaptive.
Code reference: http://www.positioniseverything.net/easyclearing.html

# Html/XHTML/XML Column