Ответ 1
В 3 словах: inline-block лучше.
Встроенный блок
Единственным недостатком подхода display: inline-block является то, что в IE7 и ниже элемент может отображаться только inline-block, если он уже был inline по умолчанию. Это означает, что вместо использования элемента <div> вы должны использовать элемент <span>. Это не очень большой недостаток, потому что семантически <div> предназначен для деления страницы, а <span> предназначен только для покрытия промежутка страницы, поэтому нет большой семантической разницы. Огромное преимущество display:inline-block заключается в том, что когда другие разработчики поддерживают ваш код в более поздней точке, гораздо более очевидным является то, что пытается выполнить display:inline-block и text-align:right, чем оператор float:left или float:right. Мое любимое преимущество подхода inline-block заключается в том, что легко использовать vertical-align: middle, line-height и text-align: center, чтобы идеально центрировать элементы, интуитивно понятным. Я нашел замечательное сообщение в блоге о том, как внедрить кросс-браузерный встроенный блок, в блог Mozilla. Ниже приведена совместимость браузера.
Float
Причина, по которой метод float не подходит для компоновки вашей страницы, заключается в том, что свойство float CSS изначально предназначалось только для текста обернуть изображение (стиль журнала) и, по своему усмотрению, не подходит для общих целей макета страницы. При смене плавающих элементов позже иногда возникают проблемы с позиционированием, потому что они не входят в поток страниц. Другим недостатком является то, что обычно требуется clearfix, иначе он может нарушить аспекты страницы. Для clearfix требуется добавить элемент после плавающих элементов, чтобы остановить их родительский элемент вокруг них, который пересекает семантическую линию между разделяющим стилем из содержимого и, таким образом, анти-шаблон в веб-разработке.
Любые проблемы с пробелом, упомянутые в ссылке выше, могут быть легко исправлены с помощью свойства white-space CSS.
Изменить:
SitePoint является очень надежным источником для консультаций по веб-дизайну, и у них, похоже, есть то же мнение, что и я:
Если вы новичок в CSS-макетах, вы будете прощены за то, что думаете, что использование CSS-плит в воображаемом виде - это высота мастерства. если ты израсходовали столько уроков CSS-макетов, сколько вы можете найти, вы можете предположим, что освоение поплавков - обряд посвящения. Вы будете ослеплены по изобретательности, пораженной сложностью, и вы получите смысл достижения, когда вы, наконец, понимаете, как работают поплавки.
Не обманывайте себя. Тебе промывают мозги.
http://www.sitepoint.com/give-floats-the-flick-in-css-layouts/
2015 Update - Flexbox - хорошая альтернатива современным браузерам:
.container {
display: flex; /* or inline-flex */
}
.item {
flex: none | [ <'flex-grow'> <'flex-shrink'>? || <'flex-basis'> ]
}
21 декабря 2016 г. Обновление
Bootstrap 4 удаляет поддержку IE9 и, таким образом, избавляется от поплавков из строк и переполняется Flexbox.