clearfix - example

by Lars Moelleken

HTML

<div class="clearfix">
    <img src="logocss.gif" width="95" height="84" />
    <p>This is some text. This is some text. This is some text. This is some text. This is some text. This is some text.</p>
</div>

<p>This is also some text. This is also some text. This is also some text. This is also some text. This is also some text. This is also some text.</p>

CSS

/*
* Clearfix for modern browsers
* 1. The space content is one way to avoid an Opera bug when the
* `contenteditable` attribute is included anywhere else in the document.
* Otherwise it causes space to appear at the top and bottom of elements
* that receive the `clearfix` class.
* 2. The use of `table` rather than `block` is only necessary if using
* `:before` to contain the top-margins of child elements.
*/

.clearfix:before,
.clearfix:after {
    content: " "; /* 1 */
    display: table; /* 2 */
}

.clearfix:after {
    clear: both;
}

img
{
float:left;
}