This is a popular way to clear the float and has been fully adopted on many major projects.
This method is derived from positioniseverything and is implemented by the after pseudo-class: After and Iehack, fully compatible with the current mainstream browser.
. clearfix:after { content: "."; Clear:both; height:0; Visibility:hidden; Display:block; } /* This is the processing of Firefox, because Firefox supports the generation of elements, and all versions of IE do not support the generation of elements */. Clearfix{display:inline-block;}/* This is the processing of IE browser on MAC */html . clearfix{height:1%;}/* This is the processing of the IE6 browser on Win */* + HTML. clearfix{height:1%;}/* This is the processing of the IE7 browser on Win */. C Learfix{display:block,}/* This is a modification to display:inline-block, and a reset to a chunk element */
Here's a admin10000.com to clean up the floating code.
. clearfix:after { content: "020"; Display:block; height:0; Clear:both;}. Clearfix { zoom:1;}
This is the optimized version of the clear floating style, it is highly recommended.
Related documents: CSS clear floating common methods summary