【Turn】Clear floating solutions

two cases

Clearing the floating includes clearing the floating of the child element and clearing the floating of the parent element. To clear the floating of the parent element, you only need to set clear to both, and to clear the floating of the child element, you can use the empty label method, the clearfix method or the overflow method. . Because it is relatively simple to clear the floating of the parent element, and the empty tag method to clear the floating of the sub-element will add extra tags, so here we mainly talk about the clearfix method, the overflow method and the inline-block method found by chance.

Why clear float

If the height of a block-level element is not set, then its height is stretched by the child elements inside. If the child element is floated and deviates from the standard document flow, the height of the parent element will be ignored. You can Use firebug to see that if you don't clear the float, the parent element will have insufficient height, so if you set the border or background, you will not get the correct resolution

Clear child element floating clearfix method

demo 1 clearfix method

• 
• 
• 

Html Code

<ul id="demo1" class="nostyle demo clearfix">
   <li><img alt="img1" src="http://placehold.it/150/ffffff/00c5e3&text=demo"></li>
   <li><img alt="img2" src="http://placehold.it/150/ffffff/00c5e3&text=demo"></li>
   <li><img alt="img3" src="http://placehold.it/150/ffffff/00c5e3&text=demo"></li>
</ul>

Css Code

/*Concise version*/
.clearfix:before, .clearfix:after {
	content:"";
	display:table;
}
.clearfix:after{
	clear:both;
	overflow:hidden;
}
.clearfix{
    zoom:1;
}
/* Classic version */
.clearfix:after {
    visibility: hidden;
    display: block;
    font-size: 0;
    content: " ";
    clear: both;
    height: 0;
}
* html .clearfix             { zoom: 1; } /* IE6 */
*:first-child+html .clearfix { zoom: 1; } /* IE7 */

Note: The main method of clearfix is ​​to add a clearfix class to the parent element of the floating element, and then the frame of the parent element will include all floating child elements.

Clear child element floating overflow method

demo 2 overflow method

• 
• 
• 

Css Code

/* overflow:auto */
#demo2{
	overflow:auto;*zoom:1;
}
/*或 overflow:hidden */
#demo2{
	overflow:hidden;*zoom:1;
}

Note: This method is mainly to set CSS on the parent element, so there is no need to add a class. The following inline-block method is the same, just set the CSS of the parent element.

Clear child element floating inline-block method

Note: This method was discovered when I was writing this article, and it is perfectly compatible with browsers. Because it was discovered by accident and has not been widely used, it is recommended for the time being. Those who are interested can test it privately. Of course, the child elements it clears are floating and The first two are still a bit different. If you are careful, you have already discovered that the first two demos are wider than the demo below. Haha, inline-block behaves normally.

demo 3 inline-block method

• 
• 
• 

Css Code

 

#demo3{
	display:inline-block;*display:inline;*zoom:1;
}