Какая польза от использования без таблиц, если вам нужно очищать блоки везде?

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

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

Answer 3

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

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

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

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

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

---

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

Answer 4

Я лично использую взлом 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 5

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

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

Answer 6

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

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