Where to apply the clearfix class

Question

So I'm having a problem with the last paragraph apparently not clearing and slipping into the middle of the h1 and nav. But when I put a div with a clear:both property before the paragraph it appears to work.

Bear with my fiddle, please.

• I used a purple background to represent the image replacement technique that I learned from nettuts.
• The clearfix part is a class named "group", the CSS is at the bottom.
• Also if I remove the display:block; from h1 > a the layout breaks so a follow up question is, what elements should I float and where should I apply the clearfix.

Answer 1

The problem you are seeing arises because the clearing element is in the wrong place.

Consider your CSS:

h1 {
    margin: 0;
    float: left;
    background: red;
    text-indent: -9999px;
    border: 1px dashed cyan;
}
nav {
    height: 44px;
    margin: 0;
    float: right;
    background: black;
    border: 1px dashed cyan;
}
.group:after {
    content:"x";
    display:table;
    clear:both;
    background-color: cyan;
}

You have h1 floated left and nav floated right, and then you have your p block with your text (not floated).

The p content wraps around the two floated elements as expected unless you add the clear:both rule to p as pointed out earlier.

The clearing element has to appear in the DOM after the nav element.

In this example, you apply .group to nav, which generates content that appears after the ul block that is a child of the nav block.

The problem becomes more obvious is you set the nav height to auto and you add some borders and colors to show the edges of the various blocks.

See demo at: http://jsfiddle.net/audetwebdesign/9nGQy/

The problem can be seen as follows:

I added an x to mark the spot in your generated content for the clearing element, which appears within the nav block.