Ways to clear CSS floating

This time to everyone to get rid of CSS floating method, clear CSS floating note what, the following is the actual case, together to see.

One, why should we float

Why float, why to clear float, and clear floating method. In the layout of the Web page sometimes need to display the elements side by side, if you do not choose to float, then those block elements will be a line of display, Occupy space does not say, the user experience is very bad.

Here is the element code with no float

<p class= "box" >        <p class= "box01" ></p>        <p class= "box02" ></p>    </p>. box{    background: #000;}. box01{    width:100px;    height:100px;    background:red;}. box02{    width:100px;    height:100px;    Background:yellow;}

1-1 figure is not floating element, 1-2 figure is the outer container of the width of the height, the following will say this intention

After we add a float to the element, the layout is changed, and two P side-by-side display, 1-3, is not very magical, haha

But we have found that the outermost layer of the P background color is gone, the height has become 0, because the element out of the document flow, in the outermost p does not occupy space, then we need to clear the float, clear the child element floating to the parent element of the impact of collapse. (note here the clear float does not refer to the floating of the child elements set before, the second is to clear the effect of floating to the parent element, I hope you can understand).

There are three ways to clear the float:

The first kind: clear:both;

Add a class clear P (similar to box01,box02) inside the parent element, and then add the attribute value Clear:both for the class, you can clear the float, the following is the code and the effect after the float is cleared 1-3

<p class= "box" >        <p class= "box01" ></p>        <p class= "box02" ></p>        <p class= "Clear" ></p>    </p>   . box{    background: #000;}. clear{    Clear:both;}. box01{    width:100px;    height:100px;    background:red;    Float:left;}. box02{    width:100px;    height:100px;    Background:yellow;    Float:left;}

You can see the background color out, and the parent element's height is 100px, which is the child elements open.

The second kind: Overflow:hidden;

Add Overflow:hidden to the parent element, or you can clear the floating, CSS code below, but do not advocate the use of this method, Overflow:hidden;

. box{        background: #000;        Overflow:hidden;    }

The Third Kind: clearfix;

If your page uses the bootstrap framework, the introduction of CSS files, to add Clearfix to the parent element can be cleared floating, which is usually the most common work is also the most popular programmer favorite method, just add a class can, and Clear:both is to the page added a p. So, we recommend a third method for the small series.

If your page is not using the bootstrap framework, then there are source code for beginners to refer to, add pseudo-class to clearfix to clear the float.

<p class= "box Clearfix" >        <p class= "box01" ></p>        <p class= "box02" ></p>        <p class= "Clear" ></p>    </p> box{    background: #000;}. clearfix:before,.clearfix:after{    content: ";    display:table;//can be a good solution to browser compatibility issues}.clearfix:after{    clear:both;}. box01{    width:100px;    height:100px;    background:red;    Float:left;}. box02{    width:100px;    height:100px;    Background:yellow;    Float:left;}

Believe that you have read the case of this article you have mastered the method, more exciting please pay attention to the PHP Chinese network other related articles!

Recommended reading:

H5 implement multi-image preview upload and click to drag controls

S5 to fit a layered screen