-cp-contain

When every child of an element has been floated, that element will collapse to nothing. This is sometimes undesirable for styling, and there are two techniques to restore the element without the need to add more HTML. The two main values that -cp-contain accepts are named after the techniques:

overflow

Applying overflow: hidden to the element will cause it to contain the floated children. This method is the simplest, although it does have the occasional side-effect (it stops margins from collapsing, for example).

    #content { -cp-contain: overflow; }

becomes

    #content { overflow: hidden; }

easy

Applying content to the :after pseudo-property of the element and then styling it to be invisible. This generates a lot more CSS, but has no side-effects other than containing the floats.

There are two ways of fixing this in versions of Internet Explorer that do not support :after, one that generates valid CSS and one that uses the zoom:1 hack. These can be selected by adding a second keyword of "valid" or "hack". Without either, the "hack" method is used as it is shorter.

    #content { -cp-contain: easy valid; }
    /* -- */
    #nav     { -cp-contain: easy hack; }

becomes

    #content { display: inline; }
    #content:after {
        content:    ".";
        display:    block;
        height:     0;
        clear:      both;
        visibility: hidden;
    }
    #content { display: block; }
    /* -- */
    #content { _zoom: 1; }
    #content:after {
        content:    ".";
        display:    block;
        height:     0;
        clear:      both;
        visibility: hidden;
    }