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 и соответствующим значением. Например: <div style=»clear:both»></div> — этот блок не обтекает плавающий элемент с левого и правого краёв.
Как сделать плавающий блок html
Пока я творю, я живу!
Блог посвящен: HTML, CSS, PHP, WordPress, Bootstrap
Плавающие блоки в CSS. Основы CSS для начинающих. Урок №15
Всем привет!
В сегодняшнем уроке я расскажу, как при помощи плавающих блоков можно построить каркас для сайта и сделать меню по горизонтали (если вы используете для меню списки <ul><li>). Тема очень важная, так как вы частенько будете пользоваться этим правилом.
Плавающий блок в CSS
Свойства «FLOAT»
Правило « float » определяет, будет ли блок плавающим. Если будет, то в какую сторону он будет перемещаться.
- left — блок прижат к левому краю. Текст будет обтекать справа;
- right — блок прижат к правому краю. Текст будет обтекать слева;
- none – перемещение блоков выключено (значение по умолчанию).
Предлагаю для лучшего понимания создать три блока, это будут три блока без правила « float ».
Пример без правила «float» :
Результат без правила «float» :
Как видите, все блоки оказались один под одним.
Теперь посмотрим, как будут себя вести блоки с правилом «float».
Пример с правилом «float» :
второй и третий блок прижмем к правой части экрана, а первый к левой части.
Результат с правилом «float» :
Ну, как вам результат?
Свойства «CLEAR»
Если задать блоку правило « float », то стоит упомянуть правило « clear ».
Правило « clear » устанавливает, с какой стороны элемента запрещено обтекание другими элементами.
- left — Обтекание запрещено с левой стороны
- right — Обтекание запрещено с правой стороны
- both — Обтекание запрещено с левой и правой стороны
- none — Обтекание разрешено с левой и правой стороны (значение по умолчанию).
Для примера создадим четвертый блок и пройдемся по всем значениям.
Пример без правила «clear» :
Результат без правила «clear» :
Хм, все хорошо, но как сделать так, чтобы четвертый блок был с правой стороны под всеми остальными блоками, то есть снизу. Вот тут нам и пригодится правило « clear ».
Пример с правилом «clear» — значение « left »:
Прижмем четвертый блок к правой стороне и запретим обтекание с правой стороны.
Результат с правилом «clear» — значение « left »:
Пример с правилом «clear» — значение « right »:
Прижмем четвертый блок к левой стороне и запретим обтекание с левой стороны.
Результат с правилом «clear» — значение « right »:
Пример с правилом «clear» — значение « both »:
Результат с правилом «clear» — значение « both »:
Я думаю, что правило « clear » со значением « none » нет смысла показывать, так как оно является и так по умолчанию.
Дополнение
Для тех, кто дочитал до конца показываю маленький пример, как сделать горизонтальное меню (если вы используете для меню списки <ul><li> ).
Например, пропишите в HTML:
Для оформления пропишите вот такие стили в CSS:
Меню получилось вертикальным. Чтобы сделать горизонтальным, добавьте уже известное вам правило « float » со значением « left » к классу « menu li »:
Простой способ сделать плавающий блок меню или рекламы на чистом CSS.
Серия «Шаблоны» для тех кто любит выбирать самые простые и легкие решения для своих сайтов!
В данной статье хочу рассказать о возможности сделать плавающий блок в боковой панели без использования JavaScript , на чистом CSS . Безусловно JavaScript играет большую роль при разработке и создании сайтов и предоставляет больше возможностей, но зачем изобретать велосипед когда существуют более простые решения. В сети существуе огромное количество примеров исполнения боковых плавющих блоков на Js, есть и очень сложные с использованием несколких блоков одновременно где не обойтись без скрипта. Но я не думаю что в таких конструкциях нуждаются современные сайты хотя, сколько людей столько и мнений, а в гонке за производительностью играет роль каждый пробел)).
И так для нашего плавающего блока потребуется HTML конструкция такого вида. Это только родительский блок с плавающим внутри
И теперь все что требуется добавить, это только два стиля к плавающему блоку.
Примечания: в некоторых случаях может потребоваться настройка родительского блока! Например добавление: display: block; height: 100%;
Как сделать плавающий блок на сайте?
Плавающий блок (или как его ещё называют двигающийся, фиксированный, прилипший) нужен на сайте для того, чтобы пользователь при прокрутке страницы видел один неподвижный элемент, в который чаще всего помещают рекламу (тизеры, баннеры или контекст).
Такая «плавающая» реклама заметно повышает число показов и переходов по ней, а соответственно и доход.
Рекламу Adsense помещать в фиксированный блок нельзя.
Увы, правила адсенса нам это запрещают. Тем не менее, многие владельцы сайтов игнорируют правила на свой страх и риск. Может быть, их за это даже не наказывают, но я бы не советовал рисковать.
Я размещаю в такие блоки РСЯ, свои тизеры/баннеры, а иногда вместо рекламы вывожу там похожие записи или какую-то полезную для посетителя информацию.
Давайте расскажу, какими способами можно сделать плавающий блок на своём сайте.
Задача: сделать последний блок в боковой колонке (сайдбаре) – плавающим. Причём, чтобы он прилипал только в тот момент, когда пользователь доходит до него скроллингом, а не сразу при открытии страницы. Также блок должен «отлипать», доходя до футера (т.е. не перекрывать его).
Самый рабочий способ
Существует много вариантов реализации прилипающего блока, но не все они работают корректно. Скажу из личного опыта: один и тот же метод установки блока может сработать на одном сайте, а на другом появятся косяки.
Ниже пример плавающего блока, который сработал практически на всех сайтах, где я его устанавливал. Косяков не было. Движок тоже не важен (DLE, WordPress, LiveStreet и др.).
В желаемом месте боковой колонки вставляем такой HTML-код:
Далее создаем файл fixads.js и прописываем в него:
$ ( window ) .scroll ( function ( ) <
var sb_m = 20 ; / * отступ сверху и снизу * /
var mb = 300 ; / * высота подвала с запасом * /
var st = $ ( window ) .scrollTop ( ) ;
var sb = $ ( ".sticky-block" ) ;
var sbi = $ ( ".sticky-block .inner" ) ;
var sb_ot = sb.offset ( ) .top;
var sbi_ot = sbi.offset ( ) .top;
var sb_h = sb. height ( ) ;
if ( sb_h + $ ( document ) .scrollTop ( ) + sb_m + mb < $ ( document ) . height ( ) ) <
if ( st > sb_ot ) <
var h = Math.round ( st — sb_ot ) + sb_m;
sb.css ( < "paddingTop" : h >) ;
>
else <
sb.css ( < "paddingTop" : 0 >) ;
>
>
> ) ;
В этом коде можно задать отступы сверху, снизу, а также высоту вашего подвала, т.е. ту высоту, на которой блоку нужно остановиться.
Теперь подкключаем JS. Для этого прописываем в секции HEAD:
Самый простой способ (для WordPress)
Также безотказный метод, но при помощи установки плагина Q2W3 Fixed Widget (Sticky Widget). Работает без косяков.
Достоинства:
- не нужно разбираться/понимать HTML;
- простота и скорость установки.
Недостатки:
- лишняя нагрузка на сервер;
- не гибкий. Плавающим становится весь виджет (включая название и его оформление). Допустим, сделать этот блок иным цветом или размером будет сложно.
Как пользоваться:
- Скачиваем плагин.
- Устанавливаем.
- Активируем.
- Заходим в админке во вкладку: Дизайн -> Виджеты. Открываем тот виджет, который хотим сделать фиксированным.
- Ставим галочку возле «Зафиксировать виджет» и нажимаем кнопку «Сохранить».
Другие способы реализации скользящих блоков
Они мне показались менее удобными и не такими понятными, как два метода выше. Но всё же о них расскажу.
Вариант #1 (без jQuery)
В сайдбар вставляем:
Прописываем стили в HTML (лучше добавить сразу в CSS):
Теперь на страницу добавляем сам скрипт (лучше вынести в отдельный файл, как в «Самом рабочем способе»):
Вариант #2 (с jQuery)
Прописываем HTML-код в боковой колонке:
Подключаем скрипт. Перед </body> вставляем:
Создаём файл jquery.lockfixed.js и в него прописываем:
Подключаем скрипт в секцию <head>, добавляя вот такую строчку:
Если не подключена библиотека jQuery, то подключить и ее можно добавив ещё одну строчку в <head>:
Важно! Если ваш шаблон адаптивный, то сразу проверяйте как скользящий блок работает в мобильной версии и при других размерах экрана (иногда блоки могут наезжать на основной текст или вообще его перекрывать).
Пример плавающего блока вы можете наблюдать у меня на блоге:
Вот, собственно, и все способы, которые я использую на своих сайтах. Если вы знаете еще какие-то поделитесь в комментариях.