How to float elements with different heights?

I know I'm late to the party but someone just linked this question to another similar one and I realized this one misses the flexbox solution...
(which was not around when the question was asked).

Add the desired vendor prefixes and remove unnecessary in your CSS

.parent {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: -moz-box;
  display: flex;
  -webkit-flex-wrap: wrap;
      -ms-flex-wrap: wrap;
          flex-wrap: wrap;
  -webkit-flex-flow: row wrap;
      -ms-flex-flow: row wrap;
          flex-flow: row wrap;
}

example

you could just apply a clear to every fifth element to force it to start all the way at the left. I think it would look something like this in css3:

div#wrapper > *:nth-child(4n+1) {
   clear: both;
}

jsFiddle demo

As mentioned by @Arieljuod you can use display: inline-block instead of float. The beauty of this is that it will work in all browsers (including IE7+ with the hack below) and is completely fluid:

div {
    ...
    display: inline-block;
    vertical-align: top;
    margin-bottom: 0.3em;
    *display: inline;
    *margin-right: 0.3em;
    *zoom: 1;
    ...   
}

Working example: http://jsfiddle.net/cRKpD/1/