During floating layout, most people know that floating cleaning is necessary: <Div style = "clear: Both;"> </div>.
For example:
<Div style = "Background: #666;">
<Div style = "float: Left; width: 30%; Height: 40px; Background: # Eee;"> some content </div>
</Div>
Preview thisCodeThe 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;">
<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;">
<Div style = "float: Left; width: 30%; Height: 40px; Background: # Eee;"> some content </div>
</Div>
Define the CSS class for "floating cleaning" control:
Code:
. 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 */
* 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 */
It will be found that even if the child element is floating, the parent element float container will still be surrounded and highly adaptive.
The margin-top of the clear element is reset to zero.