For example:
<Div style = "Background: #666;"> <! -- Float container -->
<Div style = "float: Left; width: 30%; Height: 40px; Background: # Eee;"> some content </div>
</Div>
Preview this Code The parent element float container of the outermost layer is 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:
Copy code The Code is as follows:. Clearfix: After {}{
Content :".";
Clear: both;
Height: 0;
Visibility: hidden;
Display: block;
}/* This is the processing of Firefox, because Firefox supports generating elements, while all IE versions 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 of IE browser on win */
. Clearfix {} {display: block;}/* This is the modification to display: inline-block;, reset to block element */
/** // * End hide from IE-Mac */
In this case, preview the above Code (delete this annotation) and you will find that even if the child element is floating, the parent element float container will still be surrounded and highly adaptive.
