In a floated grid, all it takes is one slightly taller grid element to break the whole layout.
If this weren't a responsive design, you could fix the height and call it a day, but nearly everything I build these days is responsive. Here's where the inline-block fix saves the day:
/* Inline-Block Grid */
vertical-align: top; /* line up the tops of the blocks */
width: 33%; /* NOTE */
NOTE: because whitespace counts in inline-block, you'll have to either round down from a full 100% or eliminate all whitespace between elements in your HTML file. I tend to choose the former option, as I'm often not in complete control of markup.
Bonus: no clearfix needed!