Method to Solve the parent-level element height collapse problem, level-level element collapse Method

Source: Internet
Author: User

Method to Solve the parent-level element height collapse problem, level-level element collapse Method

If the parent element only contains floating elements and the height and width of the parent element are not set. Then its height will collapse to zero, that is, the so-called "height collapse". If the parent element contains a background or border, then the overflow element is not like a part of the parent element. Solving the "high collapse" problem is simple:

1. Floating parent Element

If a parent element floats, the height of the parent element expands until it fully contains the floating element. Although this method is strange, it is very effective. If you select this method, you must add clear: both to the next element of the element to make sure that the floating element falls below the parent element.

2. Use overflow: hidden, zoom: 1

{

Overflow: hidden;

Zoom: 1;

}

Overflow: The hidden attribute is also a strange feature in css. It forces the parent element to expand to include floating elements. zoom: 1 only triggers the hasLayout mode of ie6, does not affect other browsers.

3. Use the "simple cleanup method"

. Clearfix {

Zoom: 1;

}

.Clearfix: after {

Content :'';

Display: block;

Height: 0;

Font-size: 0;

Clear: both;

Overflow: hidden;

}

Zoom: 1 is compatible with ie6 only. after is a pseudo class in css. ie6 and earlier versions are not compatible. This method can be said to be the best method to combine, without affecting any other style, strong versatility, wide coverage.

 


Height collapse when a css parent element contains a float child element

Weak: Can I use IE6 ..?
 
Why does float collapse the height of an external container? Is this a bug?

The parent element only contains floating elements, so its height will collapse to zero (if you have not set the height attribute or set it to auto. This will happen, of course, not all browsers used are like this. This is not the case under IE8 .) If the parent element does not contain any visible background, this issue is hard to notice, but this is a very important issue.
Solution:
1. Add <div style = "clear: both"> </div> next to the last element of the parent element. The addition does not affect the entire layout.
2. Add overflow: hidden to the attributes of the parent element.

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.