Выравнивание блоков по горизонтали. Как правильнее?

Всем привет.

Решил переделать шаблон на своём сайте, раньше при использовании нескольких блоков по горизонтали использовал "float: left", однако можно использовать и "display:inline-block"

Допустим есть такой кусок кода в шаблоне

<div class="content">
  <div class="blocl"></div><div class="blocl"></div><div class="blocl"></div>
  <div class="blocl clr"></div><div class="blocl"></div><div class="blocl"></div>
</div>

Выравнивание блоков по горизонтали при помощи "float: left". Недостаток такого решения в том что если блоки разные по высоте, то каждому блоку, который идёт с новой строки, надо присваивать стиль "clear: both".

.content {
	width:100%
}
.blocl {
	margin-left:1%; 
	width: 32%;
	float:left
} 
.clr {
	clear: both 
}

Выравнивание блоков по горизонтали при помощи "display:inline-block". В данном случае надо чтоб в коде не было пробелов между блоками и пришлось присвоить блокам стиль "vertical-align:top", почему то без него они отображаются некорректно по верхнему краю,

.content {
	width:100%
}
.blocl {
	margin-left:1%; 
	width: 32%;
	display:inline-block; 
	vertical-align:top
} 

Подскажите, как всё таки будет правильнее и лучше? И может есть ещё какие либо нюансы при использовании второго варианта?

Заранее признателен всем за подсказку.