html - CSS floats and block elements -

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

  img {float: left; }  

I think make sure not to start indenting with my titles:

  h3 {clear: left; }  

All this works fine except for some images that have lists (or any block element) that float them in the past (or not, as is the case) ). For this actually the CSS spec is clear: block elements do not flow. Line / inline elements.

This is a real problem for the lists. Is there no way around it? In a generally and consistent way?

Be sure that the flat is always cleared:

1. Add the CSS to the following:

     .clearfix: after {content: "."; Display area; Clean both; Visibility: hidden; Line-height: 0; Height: 0; } .clearfix {display: inline-block; } Html [xmlns] .clarfix {display: block; } `*` Html Cleverfix {height: 1%; }  

   You can also get this code.

2. Mark each parent of that element that is class clearfix .