Summary of methods for clearing floating float

Discard those useless methods, only remember the most practical one way!

Add a class attribute to the parent element to clear the float: clearfix!!!

The styles are as follows:

. clearfix:after{
Content: ".";
Display:block;
height:0;
Clear:both;
Visibility:hidden;

}

In order to be compatible with IE6,IE7 (now the project is almost completely out of consideration)

. clearfix{

Zoom:1

}

Clear float is so simple, can be used as a public style common.css, each page can be called directly!

A simple example application:

<div class= "Clearfix" >

<div style= "Float:left" >

Sth

</div>

<div style= "Float:right" >

Sth

</div>

</div>

Why to clear float:

1. The previous writing will find that the page is written with the confusion, and there is overlap? Is the trouble of floating!

2. The child element under the parent element, float, may cause the parent height value to be 0, so after using float, immediately add clearfix to the parent, eliminating all the weird problems that float brings!