CSS floats and blocks elements

Question

I have an annoying CSS layout issue. I am trying to put images on a specific page:

img {
  float: left;
}

I think my headers do not start with indentation:

h3 {
  clear: left;
}

Everything works fine, except for some images that have lists (or any block element) that float past them (or not in this case). The reason for this in the CSS specification is obvious: block elements do not flow. String / inline elements.

This is a real issue for listings. Is there a way around this fairly general and compatible way?

Answer 1

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

• Add the following to your 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%;
  }
  

  .

• , clearfix.

Answer 2

, . , , . , : http://www.quirksmode.org/css/clearing.html