CSS — Работа с плавающими элементами
Плавающий элемент — это блочный элемент, у которого установлено CSS свойство float со значением left или right . Располагается плавающий элемент следующим образом: он открепляется от своего текущего места (текущее место — это место, которое занимал бы блочный элемент, если он был бы не плавающим) и располагается по вертикали (верхняя граница плавающего элемента выравнивается по верхней границе текущей строки) и горизонтали (в зависимости от значения свойства float плавающий элемент будет прикрепляться насколько возможно к левому или правому краю родительского элемента). Остальное содержимое, расположенное после плавающего элемента в этом контейнере обтекает этот плавающий элемент с противоположной стороны. Место, которое он занимал бы, если бы не был плавающим, не закрепляется за ним, и его место будет занимать элементы контейнера, расположенные после плавающего элемента. Также необходимо учитывать то, что высота плавающего блока не влияет на высоту блока контейнера, в которую он помещён.
Например: высота контейнера, в который помещён только плавающий блок будет равна 0.
Рассмотрим расположение плавающих блоков на примере. Для начала создадим 3 блока с разным фоном и разместим их в контейнере, который имеет высоту 350px и внутренние отступы с каждой стороны ( padding ) по 20px. По умолчанию блочные элементы будут занимать всю ширину контейнера, и располагаться один под другим.
Теперь с помощью свойства float изменим 2 блок на плавающий и установим ему ширину равную 120px. Задание ширины для плавающих блоков является обязательным условием. После изменения блочный элемент 3 стал обтекать плавающий блок с противоположной стороны.
Теперь изменим высоту блочного элемента 3 и заметим, что после обтекания плавающего элемента блочный элемент 3 выравнивается по левому краю.
Теперь и 1 блок сделаем плавающим, дополнительно установив ему ширину 120px и высоту 150px. 2 плавающий блок (красный) будет стремиться прикрепиться насколько возможно к левому краю родительского элемента, но 1 блок ему будет мешать, следовательно, он прикрепиться к правому краю 1 блока.
Примечание: Когда плавающим элементам не будет хватать ширины контейнера, они будут перемещаться вниз.
Способы отмены обтекания
Плавающие блоки очень часто применяются при вёрстке веб-страниц. Однако бывают ситуации и довольно часто, когда необходимо отменить блоку обтекание с одной или с двух сторон. Существует несколько способов как это сделать:
-
С помощью CSS свойства clear , которое имеет значение left (отменяет обтекание с левого края элемента), right (отменяет обтекание с правого края) или both (отменяет обтекание элемента одновременно с левого и правого краёв). В зависимости от ситуации это свойство можно применить непосредственно к блоку или создать пустой блок div со свойством clear и соответствующим значением. Например: — этот блок не обтекает плавающий элемент с левого и правого краёв.
С помощью CSS свойства overflow со значением auto или hidden . Принцип заключается в том, что плавающие элементы помещаются в контейнер div , которому добавляется свойство overflow . Но будьте осторожны со свойством overflow и просчитайте возможные размеры плавающих элементов.
С помощью псевдоэлемента :after . Данный способ заключается в добавление невидимого блока, который отменяет обтекание.
. 
Изменение высоты контейнера, содержащего плавающий блок
- С помощью свойства clear . Для этого необходимо поместить пустой контейнер с этим свойством после плавающего блока.
Плавающие элементы
Плавающими будем называть такие элементы, которые обтекаются по контуру другими объектами веб-страницы, например, текстом. Правильнее говорить «обтекаемые элементы», но с другой стороны термин «плавающий элемент» давно уже прижился, так что его и буду использовать в дальнейшем.
Плавающие элементы достаточно активно применяются при вёрстке веб-страниц и служат для реализации этих и не только задач:
- обтекание картинок текстом;
- создание врезок;
- горизонтальные меню;
- колонки.
Обтекание происходит с помощью стилевого свойства float со значением left или right . По умолчанию обтекание для элементов не устанавливается, но если это по каким-либо причинам необходимо указать явно, следует использовать значение none . На рис. 3.32 показан результат применения разных значений на изображение рядом с текстом.
а. Обтекания нет или float: none
б. Для картинки установлено float: left
в. Для картинки установлено float: right
Рис. 3.32. Обтекание картинки текстом
Сам HTML-код остаётся практически неизменным и привёден в примере 3.21.
Пример 3.21. Использование float
XHTML 1.0 CSS 2.1 IE Cr Op Sa Fx
float 
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diem nonummy nibh euismod tincidunt ut lacreet dolore magna aliguam erat volutpat. Ut wisis enim ad minim veniam, quis nostrud exerci tution ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. В данном примере показано добавление свойства float со значением left к тегу . Это значение выравнивает элемент по левому краю родителя или другого плавающего элемента, а все остальные элементы, вроде текста, обтекают его по правой стороне. Значение right , наоборот, выравнивает элемент по правому краю родителя или другого плавающего элемента, а все остальные элементы, вроде текста, обтекают его по левой стороне.
Итак, с терминологией разобрались. Давайте дополним пример 3.21, чтобы рисунок лучше гармонировал с текстом. Самое главное — задать отступ справа от изображения и на всякий случай снизу. Для этого к тегу добавляется класс с именем fig , у которого установлено свойство margin , оно одновременно определяет свой отступ на каждой стороне изображения (пример 3.22).
Пример 3.22. Обтекание картинки
XHTML 1.0 CSS 2.1 IE Cr Op Sa Fx
Рисунок по левому краю Винни-Пух был всегда не прочь немного подкрепиться, в особенности часов в одиннадцать утра, потому что в это время завтрак уже давно окончился, а обед еще и не думал начинаться. И, конечно, он страшно обрадовался, увидев, что Кролик достает чашки и тарелки.
Результат примера показан на рис. 3.33.
Рис. 3.33. Рисунок с выравниванием по левому краю и обтеканием по правому
Создание врезок
Врезкой называется блок с рисунками и текстом, который встраивается в основной текст. Врезка обычно располагается по левому или правому краю текстового блока, а основной текст обтекает её с других сторон (рис. 3.34).
Рис. 3.34. Вид врезки
Чтобы врезка выделялась в тексте, у неё обычно устанавливают фоновый цвет и добавляют рамку. По своему виду врезки напоминают приведённый выше способ обтекания текстом картинки, поэтому код для создания врезок практически идентичен предыдущему (пример 3.23).
Пример 3.23. Добавление врезки
XHTML 1.0 CSS 2.1 IE Cr Op Sa Fx
Врезка — инструмент Magic Erase. По своему действию похож на инструмент Magic Wand, но в отличие от него, не выделяет область, а стирает ее.
Инструмент Magic Erase (Волшебный ластик) стирает пикселы близкие по цвету. Если мы работаем со слоем Background или со слоем, прозрачность на котором заблокирована, пикселы заменятся на фоновый цвет. Во всех остальных случаях мы получим прозрачную область.
Принцип работы с инструментом Magic Erase напоминает работу с инструментом Magic Wand. А именно, вначале устанавливаем подходящее значение Tolerance, включаем флажок Anti-aliased для создания плавных границ, убираем флажок с параметра Contiguous для одновременного удаления всего фона, после чего щелкаем по фотографии в районе неба. Если слой Background был предварительно переименован, мы получим прозрачные участки в нужных местах.
При создании врезок следует обязательно указывать её ширину с помощью свойства width . Иначе размер слоя окажется гораздо шире, чем это требуется.
Расположение слоев по горизонтали
По умолчанию блочные элементы выстраиваются по вертикали один под другим, но при помощи свойства float их можно заставить располагаться рядом по горизонтали. При этом требуется установить ширину слоёв и задать для них float . Если ширина не указана, она будет равна содержимому слоя с учётом полей и границ. В примере 3.24 взят каталог товаров, созданный в предыдущем разделе с помощью строчно-блочных элементов, и переделан под использование float . Чтобы блоки были заметны, фон веб-страницы установлен серым.
Пример 3.24. Блоки по горизонтали
XHTML 1.0 CSS 2.1 IE Cr Op Sa Fx
Каталог BODY < font: 10pt Arial, Helvetica, sans-serif; background: #f0f0f0; /* Цвет фона веб-страницы */ >#catalog A < color: #666; >#catalog A:hover < color: #1fa0e2; >#catalog DIV < width: 110px; /* Ширина */ background: #fff; margin: 0 5px 15px 0; /* Отступы */ text-align: center; /* Выравнивание по центру */ float: left; /* Выравнивание по левому краю */ >#catalog P < margin: 0 5px; >#catalog SPAN 
Компьютеры и орг.техника 4296
Мобильные устройства 2109
Фото 315
Видео 1856
