CSS height collapse

Problem Description: When the parent element contains only floating elements, and the parent element does not have a height set, if the parent element sets the border border, it appears that the child element is not within the parent element.

such as this:

Html:

<id= "parent">    <class= " Left "></div>    <class = "Right" ></ Div > </ Div >

Css:

    {        border: 2px solid #000;    } {width: 100px;                      Height: 100px;         float: left;    } {width: 200px;                      Height: 200px;         float: left;    }

The result is this:

This is the problem of a high level of collapse, which is true for every browser, including IE6.

Workaround:

The parent element setting Overflow:hidden is:

    {        overflow: hidden;    }

Or:

Adds a child element to clear the float.

    {        width: 0;         height: 0;         Clear: both;         Visibility: hidden;    }

The above method is valid in addition to the IE6 browser:

But in the IE6, Overflow:hidden, directly did not function, clear the float is like this:

The parent element is broken .....

You can use a bug in IE6, whose height and min-height function, so you can set a height for the parent element arbitrarily.

    {        * height: 1%;    }

Because it is specially set for IE6, the front adds an * number, only IE recognizes.

This way, both the overflow and the clear effects are available.

However, there is a problem, although the height of the expansion, but the use of overflow, the bottom edge is close to the use of clear floating time is a certain distance.

In the book "Master CSS," This is the solution.

    {        content: '. ';         height: 0;         Clear: both;         Visibility: hidden;         Display: block;    }

In such a way to clear the float.

So the effect is unified.

In other blogs, also see, in fact, for IE6 can also use zoom:1.

Summing up, the method is still quite a lot, using overflow simple, also do not have to introduce additional elements, but sometimes caused the problem of scroll bar.

Clears floating general, but introduces other external elements.

CSS height collapse