Clearfix variant tests

Testing margin collapse of non-floats within elements using different clearfix code.

by necolas

HTML

<h1>Clearfix : original</h1>

<div class="a cf-1">
    <div class="x">
        a float
    </div>
    <div class="y">
        normal + top margin
    </div>
</div>

<h1>Clearfix : original (simpler)</h1>

<div class="a cf-1-1">
    <div class="x">
        a float
    </div>
    <div class="y">
        normal + top margin
    </div>
</div>

<h1>Clearfix : reloaded</h1>

<div class="a cf-2">
    <div class="x">
        a float
    </div>
    <div class="y">
        normal + top margin
    </div>
</div>

<h1>Clearfix : reloaded using empty string content</h1>

<div class="a cf-3">
    <div class="x">
        a float
    </div>
    <div class="y">
        normal + top margin
    </div>
</div>


<h1>Clearfix : micro</h1>

<div class="a cf-4">
    <div class="x">
        a float
    </div>
    <div class="y">
        normal + top margin
    </div>
</div>

CSS

body {
    padding:0;
    margin:0;
}

h1 {
    font-size:16px;
    font-weight:bold;
    margin:1em 0;
}

.a {
    background:#ccc;    
}

.x { 
    float:left;
    width:200px;
    height:200px;
    margin:0 20px 0 0;
    background:red;
}

.y {
    margin:10px 0 0;
    background:orange;   
}

.cf-1,
.cf-2,
.cf-3 {
    *zoom:1;
}

/* v1 - original */

.cf-1:after {
    content:".";
    display:block;
    overflow:hidden;
    visibility:visible;
    clear:both;
    width:0;
    height:0;
}

/* v1.1 - original (simpler) */

.cf-1-1:after {
    content:"";
    display:block;
    clear:both;
}

/* v2 - reloaded (thierry's) + visibility:hidden for old Firefox */

.cf-2:before,
.cf-2:after {
    content:".";
    display:block;
    overflow:hidden;
    visibility:hidden;
    width:0;
    height:0;
}

.cf-2:after {
    clear:both;
}

/* v3 - reloaded using empty string content */

.cf-3:before,
.cf-3:after {
    content:"";
    display:block;
    overflow:hidden;
    visibility:hidden;
    width:0;
    height:0;
}

.cf-3:after {
    clear:both;
}

/* v4 - micro clearfix */

.cf-4:before,
.cf-4:after {
    content:"";
    display:table;
}

.cf-4:after {
    clear:both;
}

p {
    margin:30px 0;
}