CSS floats and block elements

Question

I have an annoying CSS layout problem. I'm trying to float images on a particular page:

img {
  float: left;
}

I think make sure my headings don't start indented with:

h3 {
  clear: left;
}

It all works fine except for some of the images that have lists (or any block element) floating past them (or not as the case is). The reason for this is actually clear in the CSS spec: block elements don't flow. Line/inline elements do.

This is a real problem for lists however. Is there any way around it in a fairly generic and compatible way?

Answer 1

Here's what I always do to make sure the float is always cleared:

1. Add the following to the CSS:

   .clearfix:after {
       content: ".";
       display: block;
       clear: both;
       visibility: hidden;
       line-height: 0;
       height: 0;
   }
   
   .clearfix {
       display: inline-block;
   }
   
   html[xmlns] .clearfix {
       display: block;
   }
   
   `*` html .clearfix {
       height: 1%;
   }
   

   You can also find this code here.

2. Mark every parent of the element that's floated with class clearfix.