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

Question

Я понимаю, что цель движения к <div> теги из <table> имеет смысл, поскольку это более семантично.Однако я не понимаю, какая выгода будет получена, если вам все еще нужен блок очистки, чтобы заставить работать макеты на основе столбцов.Например:

<!-- Note: location-info & personal-info both float left. -->
<div class="contact"> 
    <div class="personal-info">
        <p>
           Shawn, etc, etc
        </p>
    </div>
    <div class="location-info">
        <p><address>etc</address></p>
    </div>
    <br style="clear:both" /> <!-- clearing block -->
 </div>

Посторонний <br> тег используется строго для описания стиля и необходим для того, чтобы заставить макет работать.Разве это не разрушает все преимущества, полученные от удаления таблиц?

Answer 1

Что, если я скажу тебе ты не сделал этого потребность блок очистки?

.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

Answer 2

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

Answer 3

Я понимаю, что цель движения к <div> теги из <table> имеет смысл, поскольку это более семантично.

На самом деле все с точностью до наоборот:двигаясь от <table> Для <div> создает ваш HTML-код Меньше семантический.На самом деле, весь смысл из числа <div> (и <span>) элементы должны иметь НЕТ семантика!

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

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

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

---

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

Answer 4

Вовсе нет.Есть много других преимуществ, позволяющих избегать использования таблиц.

• Таблицы вместо DIVs
• DIVs противДайте опровержение, пожалуйста
• DIV противТаблицы или CSS противБыть Глупым

Answer 5

Я лично использую 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 лет без каких-либо проблем.

Answer 6

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

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