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

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.