Solve internal container float floating cannot open external container and CSS pseudo class: after use

Resolve internal container Float cannot open external container, external container collapse problem

Method One:

Add an empty container directly inside <div style= "Clear:both;" ></div> can open external containers.

Method Two:

. clearfix:after {
Content: ".";
Display:block;
height:0;
Clear:both;
Visibility:hidden;
}
*html. Clearfix {
height:1%;
}
*+html. Clearfix {
height:1%;
}

A bit of meaning, content: "." Appends a character to a container in the specified. Clearfix style. Imagine, if the style is. Clearfix:before{content: "I want to add content" ...}, then a string "I want to add" is inserted in front of it.

ie8+ and other newer browsers support: After and content, we can use the: After+content method to clear the collapse caused by floating. However, IE6 and IE7 do not support: After Pseudo class, *, *+ is to solve the floating collapse problem of IE6 and IE7 respectively, of course, you can also use the IE private Zoom property, so that the div away from floating collapse problem. The code is as follows:

. clearfix {
*zoom:1;
}
. clearfix:after {
Display:block;
Content: ".";
height:0;
Clear:both;
Overflow:hidden;
Visibility:hidden;
}

What needs to be explained is: Overflow:hidden: The function is only hides the element overflow, Visibility:hidden, the function is hides the element but still affects the layout, the element occupies the space size is still in OH.

In addition,: after Pseudo-class +content can let the size of the image vertical center, similar to the removal of floating effect, IE6/7 does not support: After Pseudo-class, we can use another way to make the picture vertical center, such as the Font-size method, set a larger font size, IE6 /7 You can achieve vertical alignment of the picture, as for other browsers, use: After Pseudo-class +content content to generate an element of the Vertical-align:middle property.

Css:
. pic_box {
width:300px;
height:300px;
Background: #999;
font-size:0;
*font-size:200px;
Text-align:center;
}
. pic_box img {
Vertical-align:middle;
}
. pic_box:after {
Display:inline-block;
width:0;
height:100%;
Content: "Center";
Vertical-align:middle;
Overflow:hidden;
}
Html:
<div class= "Pic_box" >

</div>

The current picture centered on the test results that all browsers are vertically centered, but the Chrome browser's horizontal center seems to offset the left side of the point, because the Chrome browser font-size:0, does not eliminate the space generated by the horizontal distance reason. This may be the only flaw.