Question

As a part of learning CSS (& practically applying it — by creating simple themes), today I wanted to know some proper ways of clearing floats in CSS.

I wanted to see how Twitter does it, so I downloaded Bootstrap, went through the bootstrap.css file, and found what I was looking for (I found two code blocks):

.clearfix {
    *zoom: 1;
}
.clearfix:before, .clearfix:after {
    display: table;
    content: "";
}
.clearfix:after {
    clear: both;
}

&

.container {
    margin-left: auto;
    margin-right: auto;
    *zoom: 1;
}
.container:before, .container:after {
    display: table;
    content: "";
}
.container:after {
    clear: both;
}

I immediately tried it out, and that specific part of my code looked like so:

<p class="sample-preview">
    <span class="sample-preview">PREVIEW</span>
    <em>This is italicized aka emphasized</em>, and so is <em>this</em>.<br />
    <strong>This is bold aka strong emphasis</strong>, and so is <strong>this</strong>.<br />
    Use <strong><em>italics and bold together</em></strong> if you <strong><em>have to</em></strong>.
</p>

+

p.sample-preview {
    border: 1px solid #FFCCC9;
    background: #FFEBE9;
    outline: 2px solid #FFEBE9;
    padding: 10px;
}

span.sample-preview {
    display: inline-block;
    float: right;
    margin:0;
    font-weight: bold;
    font-size: 12px;
    background: #FFCCC9;
    padding: 2px 5px;

}

.sample-preview {
    margin-left: auto;
    margin-right: auto;
    *zoom: 1;
}
.sample-preview:before, .sample-preview:after {
    display: table;
    content: "";
}
.sample-preview:after {
    clear: both;
}

Although I am not entirely sure, I think this code is causing a weird bug on the page I tried it. Why do I think so? Everything seemed fine when I removed display: table; from the code using Firebug.

You can take a look at the page here and the bug is — the first pink box is taller than the content. What am I doing wrong?

Answer 1

The issue is that you’re also clearing the floated menu to the right.

There’s two solutions for that:

• the usual is to float your content area itself to the left. This means that everything inside it is in a different float context. Your clear will only affect the elements inside of it.

• another trick that works is specifying overflow: hidden on your sample-preview paragraph. This is probably easier to do. Specifying the overflow property on an element (but not set to visible) causes it to behave like a float container.

Cfr: http://www.brunildo.org/test/clear.html, http://webdesignerwall.com/tutorials/css-clearing-floats-with-overflow

I should also note that with this overflow trick, you don’t need the clearfix at all.