Bad version

Each row should have 2 or 4 blocks (according to the screen width).
"Block 5" should be on a new row, but is blocked by the big "Block 3" (because of its height).

Block 1
Block 2
Block 3 is a very long block
on several rows
that could break the layout
Block 4
Block 5
Block 6
Block 7
Block 8
Block 9
Block 10

Fixed version (using the "clear" property and the "nth-child" selector)

With the fix (using the "clear" property), the layout is not broken and blocks are cleanly aligned.

Block 1
Block 2
Block 3 is a very long block
on several rows
that could break the layout
Block 4
Block 5
Block 6
Block 7
Block 8
Block 9
Block 10
Compatibility note: the "nth-child" CSS pseudo-selector is not compatible with IE>9.
To make it compatible with IE6-8, you can use the Selectivizr polyfill (requires another library such as jquery, dojo or prototype).
For example, just add this code at the end of your <body>: 
        <!-- For nth-child support in IE6-8 -->
        <!--[if (gte IE 6)&(lte IE 8)]>
          <script type="text/javascript" src="http://cdnjs.cloudflare.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
          <script type="text/javascript" src="http://cdnjs.cloudflare.com/ajax/libs/selectivizr/1.0.2/selectivizr-min.js"></script>
        <![endif]-->
(you can see an example right here in the source of this demo)