CSS universal closure code

. Clearfix: After {
Content :".";
Display: block;
Height: 0;
Line-Height: 0;
Clear: both;
Visibility: hidden;
}
. Clearfix {display: inline-block ;}
/* Hide from IE Mac */
. Clearfix {display: block ;}
/* End hide from IE Mac */
/* End of Clearfix */

 

Example:

<Div style = "border: 2px solid red;">
<Div style = "float: Left; width: 80px; Height: 80px; Border: 1px solid blue;"> test Div </div>
<Div style = "float: Left; width: 80px; Height: 80px; Border: 1px solid blue;"> cssbbs </div>
<Div style = "float: Left; width: 80px; Height: 80px; Border: 1px solid blue;"> test Div </div>
<Div style = "float: Left; width: 80px; Height: 80px; Border: 1px solid blue;"> test Div </div>
<Div style = "float: Left; width: 80px; Height: 80px; Border: 1px solid blue;"> test Div </div>
</Div>

As you can see, the border of the external container is a red Div and is not opened. This is because the internal Div will lose the clear: Both and display: block styles after float: left, so the external Div will not be opened.

Add a Clearfix class to the peripheral Div to solve the problem.

This article is also good.