CSS Clearfix Examples and Methods

Here we will explore 5 different CSS clearfix options. A “CSS clearfix” is often needed to clear floats.

  • Examples 1-3 clear floats by applying a CSS class to a p tag. The p tag holds a “non-breaking space” – ascii code for space is “ ”
  • Examples 4 and 5 clear floats by applying the CSS clearfix class in a different manner. The clearfix is applied to a div tag that contains the floated items.

No CSS Clearfix Applied Code

Below is an example without a CSS clearfix applied. Columns 1-3 (green, red, orange) are “floated” using CSS. A CSS clearfix is needed to fix the way the pink column is displayed. Green is Chartreuse. There is a div with a blue border around it to illustrate different clearfix methods. There are 5 CSS clearfix examples below.

 

No CSS Clearfix Applied Result

Column 1
Column 2 Column 2 Column 2
Column 3
A CSS clearfix is needed to clear this correctly.

CSS Clearfix Example 1 Code

 

CSS Clearfix Example 1 Result

Column 1
Column 2 Column 2 Column 2
Column 3 Column 3

A CSS clearfix is needed to clear this correctly.

CSS Clearfix Example 2 Code

 

CSS Clearfix Example 2 Result

Column 1
Column 2 Column 2 Column 2
Column 3 Column 3

A CSS clearfix is needed to clear this correctly.

CSS Clearfix Example 3 Code

 

CSS Clearfix Example 3 Result

Column 1
Column 2 Column 2 Column 2
Column 3 Column 3

A CSS clearfix is needed to clear this correctly.

Thierry Koblentz – Nicolas Gallagher Clearfix Example Result – Example 4 Code

This is example 4. The CSS clearfix is applied differently here. It is applied to the div tag that contains the floated elements. After the div tag closes, it clears the float.

The next 2 methodologies apply the CSS clearfix in a different way. The CSS clearfix class is applied to the div with the blue border. It contains the first 3 columns. The div with the blue border will contain the floated divs that need a clearfix.

 

Thierry Koblentz – Nicolas Gallagher Clearfix Example Result - Example 4 Result

Column 1
Column 2 Column 2 Column 2
Column 3 Column 3
A CSS clearfix is needed to clear this correctly.

CSS Clearfix Example 5 Code

 

CSS Clearfix Example 5 Result

Column 1
Column 2 Column 2 Column 2
Column 3 Column 3
A CSS clearfix is needed to clear this correctly.

Search Terms:
clearfix, css after, css clearfix, div clear, css clear both, div clear both, clearfix css, css clear float, clear fix, clear div, css clear fix, clearfloat, clear float, css clearfloat, clear float css, float clear, clear both css, CSS clearfix 2013

4 thoughts on “CSS Clearfix – How to Clear Floats

  1. Pingback: Responsive jQuery Vertical Menu - Surfing Success

    • Thanks Greeny! I’m glad it helps :)

      I’d really appreciate if you shared this post on forums and social networks!

      -Nick

      Reply
  2. Pingback: jQuery UI Accordion Tutorial - Beginner « Surfing Success

Leave a reply

required

<a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code class="" title="" data-url=""> <del datetime=""> <em> <i> <q cite=""> <strike> <strong> <pre class="" title="" data-url=""> <span class="" title="" data-url="">