Блочно-строчные элементы могут выстраиваться друг за другом, а если не хватает места, то они переносятся на следующую строку.

Поведение похоже на флоатные элементы, однако, есть существенное отличие.

При переносе на следующую строку блочно-строчные ведут себя намного логичней. Высота строк у них рассчитывается по максимальному элементу с учётом отступов.

Это упражнение создано, чтобы продемонстрировать отличие в поведении флоатов и инлайн-блоков. В исходном состоянии мы видим несколько флоатных блоков, которые не смогли выстроиться в ряды, так как зацепились друг за друга.

Вы измените тип блоков на блочно-строчные и сами всё увидите, насколько умнее ведут себя инлайн-блоки.