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

Source: Internet
Author: User
Tags visibility

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.

Related Article

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.