[Zz] Clear float with CSS Clearfix

For a long time, if a container contains floating elements, I am used to addingclear:bothElement used to clear the floating, so that the parent container is supported. For example:

<Style media = "all">. children {float: Left ;}. fixed {clear: Both ;} </style> <Div class = "parent"> <Div class = "children"> child elements </div> <Div class = "children"> child elements </div> <Div class = "children"> child element </div> <Div class = "fixed"> </div>

However, adding a tag with no substantive content does not simplify the page structure, and it is easy to cause bugs when operating child elements in JavaScript.

To clear the floating in the parent container without adding the fixed element, we can use:afterPseudo class.:afterThe definition of pseudo classes in W3C is:Insert content at the end of the After element. The content is inline by default..

After using the: After pseudo-class, the complete clear floating CSS is:

.clearfix:after {     visibility: hidden;     display: block;     font-size: 0;     content: " ";     clear: both;     height: 0;}.clearfix { display: inline-block; }html[xmlns] .clearfix { display: block; }* html .clearfix { height: 1%; }

After using the above style, you only need to add a Clearfix class to the parent element to remove the fixed sub-container. And compatible with almost all web browsers.

Source: http://www.codecto.com/2011/02/css-clearfix-float/