Применение правила CSS clear: просто и удобно

Использование разнообразных устройств для отображения информации привело к необходимости ее адекватного представления без привязки к конкретным режимам, параметрам и условиям отображения.

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

Простые требования к предоставлению информации

Человек ведет диалог словами, и его понимают. Но он может использовать наглядный материал и уточнять сказанное жестами, рисунками, терминами или иным образом акцентировать внимание слушателя (потребителя). В результате он быстрее достигает цели.

Сайт обязан предоставлять информацию аналогично, при этом не должно возникать никаких дополнительных требований к кодированию на уровне HTML, CSS, JavaScript или PHP, в частности. Результат должен достигать цели и предоставляться как на персональном компьютере, так и на любом другом мобильном или стационарном девайсе.

Языки гипертекста используются не только браузерами, но и другими инструментальными средствами. Предоставление информации должно нивелировать все имеющиеся различия.

Средства, предоставляемые CSS

Не всегда следует углубляться в HTML или CSS, чтобы достичь нужного эффекта. Часто достаточно использовать простые, но эффективные средства. Минимальные затраты в любом деле - характерная черта современного кодирования информации для ее правильного отображения.

В частности, правила float и clear могут быть применены в тегах HTML и описаниях CSS и не потребуют никаких дополнительных затрат, а эффект будет надлежащим. Правило CSS clear, будучи использованным в элементе, позволяет ему разместиться верно, вне зависимости от того, какой размер у области отображения и на каком именно девайсе этот процесс происходит.

CSS не отличается изощренностью конструкций и стремится к максимально доступной простоте. Используя в элементе правило float: left или float: right, можно прижать его к той или иной стороне обтекающего его блока, а следующим элементом с правилом CSS – clear: both – разместить информацию вокруг.

Варианты использования правила CSS clear

Возможны три значения этого правила:

• left - не обтекать слева;
• right - не обтекать справа;
• both - не обтекать с обеих сторон.

Можно использовать также значения none и inherit для правила CSS clear, что по существу не отличается от представляемого функционала: предыдущий элемент (или элементы) будут лишены обтекания слева, справа или с обеих сторон. Фактически это перевод строки. Все следующие элементы окажутся в следующем информационном блоке. Какая информация будет выведена до элемента с правилом CSS clear - определяет разработчик. Элементы с абсолютным позиционированием формируются на странице в месте, установленном их свойствами.

Фактически, правило CSS clear позволяет структурировать (группировать) информационные элементы. Устройство отображает информацию общим потоком, а обнаружив в том или ином элементе правило clear, выводит его содержимое соответствующим образом.

Практика применения

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

• возможность сделать красиво и эффективно (но, возможно, долго);
• быстро и доступно.

Каждый разработчик интерпретирует сказанное по-своему. Некоторые остались верны терминологии «адаптивная верстка». Другие говорят, что делают резиновые сайты. Третьи убеждают заказчика в необходимости блочной или табличной верстки... Не суть важно, как именовать процесс, инструмент или иной метод достижениям результата.

Всегда важны только время разработки и результат работы. В первом случае использование правила CSS clear вряд ли будет иметь смысл, равно как и правило float отпадет за ненадобностью. Формировать страницу, размещать информацию и учитывать особенности различных девайсов будет мудреный алгоритм на JavaScript или комбинация стилей CSS, тесно увязанная с дивами HTML.

Во втором случае, благодаря правилам float и clear, CSS-описание позволяет просто сформировать поток элементов страницы. Приемлемый результат будет достигнут быстро и эффективно.