Re-discussion on clearing floating-space Div method

The use of floating CSS will cause confusion in the layout, and usually the way to clear the float is to use an empty Div with the following style:

<div class= "Clear" ></div>
Clear{clear:both;}

The more excellent CSS code is:

. Clear:after{content: "."; Display:block;height:0;clear:both;visibility:hidden}
. Clear{zoom:1;}

This method is now widely used, Taobao, Word-of-mouth, are the use of this. After the pseudo class: After and for the IE6 of the independent CSS Hack to achieve, fully compatible with the mainstream browser.

Of course, it's not necessary to append "." After the element through CSS, because it needs to be visibility to hide it. By optimizing, the code is as follows:

. Clear:after{content: "020";d Isplay:block;height:0;clear:both;
Clear{zoom:1;}

Where 020 refers to adding spaces after the container, thus avoiding the use of visibility to hide visibility.

In addition, the method of using empty div is not recommended. It would be a bit abrupt to insert a container without semantics in well-formed HTML simply to clear the float.