Плавающими будем называть такие элементы, которые обтекаются по контуру другими объектами веб-страницы, например, текстом. Правильнее говорить «обтекаемые элементы», но с другой стороны термин «плавающий элемент» давно уже прижился, так что его и буду использовать в дальнейшем.
Плавающие элементы достаточно активно применяются при вёрстке веб-страниц и служат для реализации этих и не только задач:
обтекание картинок текстом;
создание врезок;
горизонтальные меню;
колонки.
Обтекание происходит с помощью стилевого свойства 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
Результат примера показан на рис. 3.35.
Рис. 3.35. Расположение слоев при использовании свойства float
Из-за разного текста в подписи высота блоков также получается разной, из-за чего некоторые блоки «цепляются» за другие и не переходят на другую строку. Здесь может помочь установка высоты всех блоков через свойство height , например 100px или возврат к использованию display : inline-block .
Влияние обтекания
Свойство float кроме способности по созданию плавающих элементов имеет ряд особенностей, о которых необходимо знать. Главная особенность в том, что float действует на все близлежащие элементы, заставляя их участвовать в обтекании. Рассмотрим это на примере 3.25, где показано создание стрелок на одной строке с использованием значений left и right свойства float .
Хотя для текста и стрелок используются разные блочные элементы, которые должны располагаться на разных строках, влияние float заставляет подниматься текст выше, поскольку он попадает в зону обтекания (рис. 3.36). Также не отображается цвет фона у слоя arrow из-за того, что плавающие элементы не участвуют в потоке документа, по сути, это аналогично тому, что слой arrow оставить пустым.
Рис. 3.36. Влияние обтекания на нижележащий текст
Плавающие элементы не оказывают влияние на высоту блока, в котором они находятся. Чтобы это обнаружить, достаточно обвести блок рамкой и поместить внутрь плавающий элемент с текстом (пример 3.26).
Пример 3.26. Высота блока
XHTML 1.0 CSS 2.1 IE Cr Op Sa Fx
Высота слоя DIV < border: 1px solid #000; padding: 10px; >.fig
Винни-Пух в гостях у Кролика
Рисунок не оказывает воздействие на высоту слоя и выходит за его пределы (рис. 3.37).
Рис. 3.37. Высота слоя с плавающим элементом
Все эти особенности плавающих элементов могут оказать довольно неприятное воздействие на макет веб-страницы, особенно в случаях подобным перечисленным выше. Основной способ добиться желаемого результата — это в нужный момент отменить обтекание. Для этого есть несколько способов.
Отмена обтекания
Обтекание это мощный инструмент вёрстки, применяемый для выравнивания и упорядочивания элементов. Однако чтобы держать этот инструмент под контролем, необходим противовес, без которого огромный потенциал float сужается до пары узких задач. Речь идёт об отмене обтекания с помощью разных методов. Перечислим четыре наиболее популярных.
Ширина элемента
Если плавающий элемент будет занимать всю доступную ширину, то остальные элементы, следующие за ним, будут начинаться с новой строки. Для этого надо включить свойство width со значением 100%. Так, стиль в примере 3.25 можно дополнить следующим образом:
.left < float: left; width: 50%; >.right
Каждый слой со стрелкой теперь занимает ширину 50% и в сумме они дают 100% ширины, поэтому абзац, идущий после слоя arrow , начнётся с новой строки.
Этот метод применяется редко, поскольку ширину нельзя применить к изображениям, к тому же он не решает проблему с высотой слоя и его фоном.
Использование overflow
Свойство overflow управляет отображением содержания блочного элемента, если оно целиком не помещается и выходит за область заданных размеров. Значение auto в частности, добавляет полосы прокрутки при необходимости, а hidden отображает только область внутри элемента, остальное скрывает. Кроме этого, использование overflow со значением auto , scroll или hidden отменяет действие float . Стиль для примера 3.25 дополняется всего одной строкой:
.arrow
Результат после применения свойства overflow сразу меняется (рис. 3.38).
Рис. 3.38. Влияние свойства overflow на фон
Аналогично дополняется пример 3.26:
Результат показан на рис. 3.39.
Рис. 3.39. Влияние свойства overflow на границу
overflow одно из самых популярных свойств работающее в связке float . Но иногда возникают ситуации, когда применение этого метода недопустимо. Это происходит в тех случаях, когда элемент выходит за пределы элемента, при этом он будет «обрезан». В примере 3.27 картинка сдвигается влево от своего исходного положения.
Пример 3.27. Обрезание области элемента
XHTML 1.0 CSS 2.1 IE Cr Op Sa Fx
Картинка за пределами слоя
Винни-Пух в гостях у Кролика
Результат примера показан на рис. 3.40.
Рис. 3.40. Обрезание картинки
В IE6 метод работает только при установленном свойстве hasLayout . Чтобы его включить, можно добавить zoom : 1 наряду со свойством overflow .
Свойство clear
Для отмены действия float применяется свойство clear со следующими значениями.
left — отменяет обтекание с левого края элемента ( float : left ). При этом все другие элементы на этой стороне будут опущены вниз, и располагаться под текущим элементом.
right — отменяет обтекание с правой стороны элемента ( float : right ).
both — отменяет обтекание элемента одновременно с правого и левого края. Это значение рекомендуется устанавливать, когда требуется отменить обтекание элемента, но неизвестно точно с какой стороны.
Чтобы отменить действие обтекания, свойство clear надо добавлять к элементу, идущему после плавающего. Обычно вводят универсальный класс, к примеру, clear и вставляют пустой тег с этим классом (пример 3.28).
В данном примере для класса clear установлено свойство clear со значением both . Если вам требуется использовать разные значения, то можно ввести несколько классов и применять их по необходимости.
Этот метод также является одним из самых популярных в вёрстке в силу простоты и универсальности. Но опять же иногда возникают комбинации, в которых использование clear даёт сбой. Это происходит, когда в коде встречается одновременно несколько разных плавающих элементов. Так, в примере 3.29 с помощью float создаются две колонки, а в правой колонке float упорядочивает фотографии.
Результат примера показан на рис. 3.41. Свойство clear действует не только на класс photo , но и на класс col1 , т.е. на все элементы выше, у которых установлено float . Поэтому «Новая строка» начинается не сразу же после фотографий, а после завершения левой колонки.
Рис. 3.41. Ошибка с отображением строки
В подобных ситуациях помогает комбинация разных методов. Так, фотографии можно добавить в контейнер с overflow и удалить clearleft . Колонка приобретёт следующий вид.
Новая строка
Псевдоэлемент :after
Частое включение пустого тега со свойством clear захламляет код, особенно при активном использовании свойства float . Логично перенести всё в стили, избавившись от лишних тегов. Для этого воспользуемся псевдоэлементом :after , который в комбинации со свойством content добавляет текст после элемента. К такому тексту можно применить стилевые свойства, в частности clear . Остаётся только спрятать выводимый текст от браузера.
.clearleft:after < content: "."; /* Выводим текст после элемента (точку) */ clear: left; /* Отменяем обтекание*/ visibility: hidden; /* Прячем текст */ display: block; /* Блочный элемент */ height: 0; /* Высота */ >
Какой именно выводить символ значения не имеет, он в любом случае скрывается от пользователя через visibility , но даже будучи скрытым, текст при этом занимает какую-то высоту и влияет на близлежащие элементы. Поэтому выводимый текст ещё необходимо превратить в блочный элемент и задать ему нулевую высоту.
Поскольку текст, генерируемый через псевдоэлемент :after , располагается после элемента, он с лёгкостью заменяет конструкцию . Там, где она требуется достаточно только добавить класс clearleft , как показано в примере 3.30.
Пример 3.30. Псевдоэлемент :after
XHTML 1.0 CSS 2.1 IE 7 IE 8+ Cr Op Sa Fx
:after DIV < border: 1px solid #000; padding: 10px; >.fig < float: left; margin: 0 10px 5px 0; >.clearleft:after Винни-Пух в гостях у Кролика
Браузер IE не поддерживает :after до версии 7.0 включительно, поэтому приведённый пример в этих версиях работать не будет. Добавление zoom : 1 к плавающему элементу отменяет обтекание в IE.
Удобство приведённого метода заключается в использовании класса clearleft , который при необходимости добавляется к любому тегу. Также можно ввести дополнительные классы, стиль у которых будет различаться другими значениями clear .
Простой способ сделать плавающий блок меню или рекламы на чистом CSS.
Серия «Шаблоны» для тех кто любит выбирать самые простые и легкие решения для своих сайтов!
В данной статье хочу рассказать о возможности сделать плавающий блок в боковой панели без использования JavaScript , на чистом CSS . Безусловно JavaScript играет большую роль при разработке и создании сайтов и предоставляет больше возможностей, но зачем изобретать велосипед когда существуют более простые решения. В сети существуе огромное количество примеров исполнения боковых плавющих блоков на Js, есть и очень сложные с использованием несколких блоков одновременно где не обойтись без скрипта. Но я не думаю что в таких конструкциях нуждаются современные сайты хотя, сколько людей столько и мнений, а в гонке за производительностью играет роль каждый пробел)).
И так для нашего плавающего блока потребуется HTML конструкция такого вида. Это только родительский блок с плавающим внутри
I AM A FLOAT BOX!
И теперь все что требуется добавить, это только два стиля к плавающему блоку.
.float
Примечания: в некоторых случаях может потребоваться настройка родительского блока! Например добавление: display: block; height: 100%;
Как добавить плавающий блок на страницу
Что делаем: плавающий блок на странице, чтобы его содержимое всегда было на экране даже при скролле. При этом чтобы у него было «исходное» место на странице: например, кнопка стоит в начале страницы, а потом мы скроллим страницу вниз, а кнопка залипает. А когда мы скроллим обратно, в нужном месте кнопка прилипает обратно на нужное место.
Зачем: если вы хотите, чтобы пользователь всё время видел какую-то информацию — кнопку с регистрацией, меню или содержимое корзины. Но при этом чтобы это выглядело логично и аккуратно.
Время: 5 минут.
С чем работаем: JavaScript, jQuery и CSS.
Что понадобится: bootstrap для разметки страницы.
�� Благодаря развитию технологий такую штуку можно сделать буквально за одну команду:
С помощью css-свойства position:sticky. Тогда всё будет работать именно так, как нам надо, но будет поддерживаться не во всех браузерах.
С помощью position:fixed. Тогда блок будет просто всё время в одном месте на экране, без «домашнего» положения. Например, кнопка будет всегда висеть в правом верхнем углу экрана, как бы мы ни крутили страницу.
В принципе, поддержка position:sticky становится всё лучше, поэтому можно было бы остановиться на ней. Но ради любви к истории и из соображений паранойи воспользуемся костылями, которыми пользовались разработчики последние 10 лет: используем jQuery.
1. Размечаем страницу
Смысл такой: мы делим страницу на две части: с основным содержимым и плавающий блок. Основной части дадим 10 виртуальных колонок, а плавающему блоку — 2 оставшиеся. Для этого мы используем фреймворк Bootstrap, но можно и просто сверстать что-то вручную.
Если нужно, чтобы блок был слева — поменяйте местами их в коде с основным блоком.
Заголовок
Тут — любой текст, картинки или что-то ещё. Это же бутстрап, здесь можно всё.
2. Добавляем стили
Стили помогут настроить нам внешний вид каждого блока так, как нам нужно. Их нужно добавить в раздел или подключить отдельным .css-файлом.
/* отвечает за оба блока в целом */ section < max-width: 600px; margin:0 auto; >/* настройки основного блока */ .col-md-10 < min-height: 900px; >.content-block < padding: 15px; >/* настройки плавающего блока */ /* для наглядности это будет пока красный квадрат */ .float-block
3. Включаем «липкость»
Логика такая: нужный нам блок (например, кнопка) живёт в странице как обычный объект. Но когда мы доскролливаем до определённого места, этот блок «вырывается» из общего потока страницы и прикрепляется к экрану справа наверху.
Это поведение в современных браузерах реализовывается в css так:
Но мы ориентируемся не только на современные браузеры. Поэтому используем тяжёлую артиллерию.
Подключаем jQuery к странице в разделе :
Теперь добавляем скрипт, который даст нам нужное поведение для блоков. Его можно добавить тегом или вынести в отдельный файл.
По сути, этот скрипт говорит: «Если мы доскроллили ниже этого элемента, скажи ему position:fixed. А если выше, скажи ему position:absolute».
Вопрос из зала: «Почему вы используете jQuery, чтобы тупо обратиться к объекту на странице? Нельзя было просто написать обращение вручную, раз уж вы делаете всё на костылях»?
Отвечает Миша Полянин:
Sticky работает не всегда правильно во всех браузерах. Бывают ситуации, когда даже в зависимости от версии одного и того же браузера результат на экране и поведение отличаются от ожидаемого.
Есть элементы, с которыми sticky вообще не работает или работает через раз, например, если у контейнера есть свойство overflow: hidden. А вот jQuery вообще всё равно, какие у кого свойства, главное — получить доступ к нужному элементу, и можно делать с ним что угодно.
Но если подходить к объектам на странице глобально, то получается, что на практике работать с элементами через jQuery получается удобнее:
удобнее находить нужные элементы по любым свойствам и характеристикам;
когда таких элементов много, организовать их поточную обработку через jQuery тоже часто получается быстрее;
не нужно думать о совместимости в браузерах — jQuery-код будет работать одинаково хорошо в любом браузере.
Плавающие элементы — CSS: Позиционирование элементов
Разобравшись с правилом position , мы переходим к следующему типу потока документа — плавающий поток. Его характерная черта — обтекание элементов. Это легко понять на примере журнальной верстки. Наиболее частой в ней является схема, когда внутри текста находится картинка, но не просто между строками текста, а слева или справа от него. Текст в данном случае как бы обтекает изображение, отсюда и такое название.
Для того, чтобы сменить поток на плавающий, используется CSS-правило float , которое принимает два основных значения:
По таким значениям ясно, что элемент может обтекаться как слева, так и справа. Попробуйте в примере выше сменить правило float: left на float: right , чтобы понять разницу. Для хорошего отображения также нужно будет отзеркалить отступы — то есть margin-right сменить на margin-left .
При использовании плавающего потока происходит необычная реакция браузера: на самом деле блок выдергивается из нормального потока документа. Точно так же, как и с использованием абсолютного позиционирования. Но почему блок рядом с плавающим элементом не наезжает на него? На самом деле наезжает, но текст знает о том, что рядом с ним есть плавающий элемент, и поэтому браузер автоматически сдвигает текст к границе плавающего элемента.
Такой эффект легко увидеть, если использовать свойство opacity , которое устанавливает прозрачность элемента, и отступ внутри блока.
До недавнего времени float использовали как основной инструмент для верстки сайтов. Именно с помощью этого правила создавали различные макеты в 2-3 колонки. Так как float изначально не создавался для таких целей, то этот процесс доставлял достаточно много проблем. С приходом flex и grid необходимость использовать плавающий поток для верстки макетов отпала, а значит его можно использовать для изначальных целей, а именно верстки текстов.
Интересной особенностью свойства float является то, что при его использовании любой элемент автоматически становится блочным. Это важно, если свойство используется на строчных элементах, таких как span . После установки значения float элементу можно выставлять значения ширины и высоты без дополнительного использования свойства display .
Очистка плавающего потока
При использовании свойства float для вёрстки макетов возникает много головной боли. Встречаются ситуации, при которых элементы плавающие, но необходимо изменить это или запретить блоку возможность обтекания другими элементами.
Для примера создадим вёрстку, где есть статья и несколько боковых плашек со свойством float :
Изучите вёрстку этого компонента и посмотрите, где располагаются разные блоки.
Если нужно запретить плашкам входить внутрь текста, то используется свойство clear . Оно устанавливается у элемента, который обтекается другим блоком. Свойство принимает три основных значения:
left — запретить обтекать блок слева
right — запретить обтекать блок справа
both — запретить обтекать блок со всех сторон
Запретим обтекать статью слева. Для этого блоку установим свойство clear: left :
main clear:left;>
Если повторить это же действие, но для правого блока, то ничего не сработает:
main clear:right;>
Эффект не сработал потому что блок со свойством float находится внутри статьи, а значит обтекается не весь блок, а только его часть. В этом случае свойство устанавливается у того элемента, который обтекается. В примере это параграф. Установим свойство для него:
class="clear-right">Также у PHP недавно появились альтернативные рантаймы (среды выполнения), типа RoadRunner. Они позволяют срезать расходы ресурсов компаний на инициализацию приложения — на настройку и запуск всех необходимых библиотек и фреймворков.
.clear-right clear:right;>
Открыть доступ
Курсы программирования для новичков и опытных разработчиков. Начните обучение бесплатно
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. 
