Семантический HTML и понятный: оба

Мы пытаемся сделать наш HTML намного более семантическим, и единственное, что, кажется, остается в нашем HTML, которое связано с презентацией, это

<div class="clear"></div>

Например, если у нас есть следующий семантический html:

<div class="widgetRow">
    <div class="headerInfo">My header info</div>
    <div class="widgetPricing">$20 to $30</div>
    <div class="footerInfo">My footer info</div>
</div>

И у меня есть headerInfo и footerInfo, оба плавающие слева в CSS, а widgetPricing плавающие вправо (просто в качестве примера).

Вопрос:

Мой div widgetRow не имеет высоты или ширины. Это неправильно, чтобы добавить <div class="clear"></div> сразу после.footerInfo? Кажется, что я не являюсь семантиком в этом пункте.

Более общий вопрос

При написании семантического HTML, можно ли поместить div в ваш HTML, чья единственная задача - очистить числа?

Источник

5 ответов

Решение

Есть несколько способов очистить поплавки:

1 Используйте псевдо CSS: после урока

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

Примените класс контейнера к вашему div "widgetRow". Этот подход, вероятно, является наиболее семантическим, но он не поддерживается во всех браузерах, особенно в IE7 и ниже. поддержка браузера для: после

2 Использовать переполнение: авто или переполнение: скрыто

.container { overflow:auto; }
.container { overflow:hidden; }

Опять же, примените класс контейнера к вашему div "widgetRow". Этот подход может быть немного более семантическим, но он также может вернуться к вам, особенно при просмотре на небольших дисплеях. Переполнение: авто может вызвать горизонтальную полосу прокрутки, а переполнение: скрытый может скрыть элемент все вместе. проблемы с использованием oveflow для очистки поплавков

3 Используйте ясно: оба

.clear { clear:both; }

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

Источник

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

Вместо этого вы могли бы использовать некоторые неструктурные методы очистки, такие как easyclearing (также используемый H5BP), добавив дополнительный стиль в плавающие обертки

Источник

Часть из превосходных ответов выше, я бы добавил еще один подход:

4. Используйте дисплей: встроенный блок + вертикальное выравнивание: верх

Этот также может стать хитрым, особенно в IE7 и старше, потому что, согласно http://www.quirksmode.org/css/display.html

IE 6/7 принимает значение только для элементов с естественным отображением: inline

В настоящее время он широко поддерживается, для некоторых элементов он будет работать даже с IE6/7, и вы достигнете того же эффекта, что и плавающие элементы, но без проблемы очистки. В некоторых случаях вы можете даже внести небольшие изменения в разметку (которая останется семантической), чтобы использовать встроенный встроенный элемент. Взлом также может быть использован только для IE, см. IE7 не понимает отображения: inline-block

Anex: еще одна возможная проблема с переполнением: скрыто

Другой недостаток переполнения: скрытый подход, который я недавно испытал: при использовании элементов с абсолютным позиционированием внутри переполнения: скрытый элемент они будут обрезаны контейнером. Так, например, раскрывающееся меню CSS не будет работать хорошо.

Источник

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

Чтобы ответить на ваш более общий вопрос - нет, семантически неправильно добавлять пустые элементы для макета. Однако никто не пострадает, если у вас есть несколько пустых <div> теги!:)

Источник

Есть три основных способа очистки поплавков.

  1. Пустой div с clear:both; как вы указали.
  2. Добавление свойства CSS overflow: auto к родительскому див.
  3. Использование псевдоселекторов CSS для представления элемента после элемента и очистки поплавка на нем.

Плюсы и минусы этих

Пустой Div

профи

  • Широко поддерживается браузерами.
  • Не имеет побочных эффектов.

минусы

  • Добавление дополнительной разметки только для очистки поплавков.
  • Многие утверждают, что это не семантика.

перелив

профи

  • Никакой дополнительной разметки.

минусы

  • Может вызывать нежелательные полосы прокрутки в определенных случаях.
  • Переполнение авто на самом деле не было предназначено для этой конкретной цели очистки поплавков.

Псевдо-селекторы

профи

  • Никакой дополнительной разметки.
  • Более элегантный, чем другие методы, ИМО.

минусы

  • Не поддерживается в ie7 и менее.
Источник
Другие вопросы по тегам