Solution to parent-level element height collapse

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.