В чем преимущество безтабличного дизайна, если вам нужно убирать блоки повсюду?

Что, если я скажу вам тыне сделалнужно блокировку клиринга?

.clear-block:after {
    content: ".";
    display: block;
    height: 0;
    clear: both;
    visibility: hidden;
}

.clear-block {
    display: inline-block;
}

<div id = "wrapper" class = "clear-block">
    <div style = "float:right">
        Your content here
    </div>
    <div style = "float:left">
        More content here
    </div>
</div>

JSFiddle

Нисколько. Есть МНОГО других преимуществ, которых следует избегать при использовании таблиц.

• Таблицы вместо DIV
• DIV против таблиц, опровержение, пожалуйста
• DIV против таблиц или CSS против глупости

Если вы отображаете табличные данные, по-прежнему имеет больше смысла использовать таблицы, чем многие плавающие блоки div. Используйте имеющиеся у вас инструменты с умом - не используйте CSS вслепую там, где таблицы - лучший вариант.

Как показывает ответ аннакаты, вам не нужны эти очищающие блоки. Но помимо этого, одним из преимуществ отказа от таблиц является то, что страница может отображаться постепенно. Таблица может быть отображена только после анализа таблицы весь, включая все ее содержимое, что может занять некоторое время, если у вас большая страница и медленное соединение. div могут отображаться немедленно, а это значит, что вы сможете представить пользователю что-то полезное гораздо раньше, чем с помощью таблиц.

Конечно, это просто приятное небольшое бонусное преимущество, это не так и не должно быть причиной в избегать таблиц (для не табличных данных).

I understand that the goal of moving towards <div> tags from <table> makes sense since it is more semantic.

На самом деле все наоборот: переход от <table> к <div> делает ваш HTML меньше семантическим. Фактически, весь смысл элементов <div> (и <span>) должен иметь семантику нет!

Меня всегда раздражает, когда я вижу лес <div>, описанных как «семантический HTML». Нет, это не так! Это * не- * семантический HTML! Особенно, если он содержит много <div class='float-left'>, <div id='bottom'> и моих личных фаворитов <div class='paragraph'> и <span class='emphasis'>.

Не поймите меня неправильно, использование несемантических <div>, безусловно, лучше, чем использование неправильный-семантических <table>, но еще лучше было бы использовать семантически элементы верный - хотя во многих случаях проблема в том, что HTML их не предлагает. В вашем фрагменте, например, вы используете элемент <address>, но, согласно спецификация, этот элемент нет предназначен для разметки адресов! Это Только для разметки адреса автора страницы - IOW это совершенно бесполезно.

В опубликованном вами примере отсутствует много контекста, поэтому трудно сказать, но на самом деле похоже, что вы можете отображать либо табличные, либо иерархические данные, и в этом случае <table>s или <ul>s могут быть лучшим выбором.

Совершенно не имеет отношения к вашему вопросу: вы можете взглянуть на микроформаты hCard и XOXO.

Я лично использую хак clearfix для моих нужд очистки.

/* Clearfix */
#content:after,
.box:after {
  content:'.';
  display: block;
  clear: both; 
  visibility: hidden; 
  height: 0;
}
#content,
.box {
  zoom: 1; /* IE */
}

Обратите внимание, я просто разделяю селекторы запятыми, а не добавляю класс clearfix ко всему. Это действительно хорошо работает. Единственная проблема заключается в том, что свойство zoom специфично для IE и не проверяется, но нет побочных эффектов, которые иногда могут быть с другими свойствами, такими как overflow: auto.

Пользуюсь этим на профессиональных сайтах уже 5 лет без проблем.