Скользящий блок css: Плавающий блок (sticky div) | CSS и JavaScript — Примеры – как сделать двигающийся блок при помощи CSS и JavaScript

Leave a Comment / Css / By /

Плавающие блоки в CSS. Основы CSS для начинающих. Урок №15


Плавающие блоки в CSS. Основы CSS для начинающих. Урок №15

Всем привет!
В сегодняшнем уроке я расскажу, как при помощи плавающих блоков можно построить каркас для сайта и сделать меню по горизонтали (если вы используете для меню списки <ul><li>). Тема очень важная, так как вы частенько будете пользоваться этим правилом.

Плавающий блок в CSS

Свойства «FLOAT»
Правило «float» определяет, будет ли блок плавающим. Если будет, то в какую сторону он будет перемещаться.

Значение:

  • left — блок прижат к левому краю. Текст будет обтекать справа;
  • right — блок прижат к правому краю. Текст будет обтекать слева;
  • none – перемещение блоков выключено (значение по умолчанию).

Синтаксис:

float: значение;

Предлагаю для лучшего понимания создать три блока, это будут три блока без правила «float».

Пример без правила «float»:

 

<html>
<head>
<title>Блоки в css</title>
<style>
.blok1 {
padding:10px;
width:100px;
height:100px;
border:1px solid #666;
background:#ccc;
}
.blok2 {
padding:10px;
width:100px;
height:100px;
border:1px solid red;
background:#cc0000;
}
.blok3 {
padding:10px;
width:100px;
height:100px;
border:1px solid #000;
background:#c45000;
}
</style>
</head>
<body>
<div>первый блок</div>
<div>второй блок</div>
<div>третий блок</div>
</body>
</html>

Результат без правила «float»:

Как видите, все блоки оказались один под одним.
Теперь посмотрим, как будут себя вести блоки с правилом «float».
Пример с правилом «float»:
второй и третий блок прижмем к правой части экрана, а первый к левой части.


<html>
<head>
<title>Блок в css</title>
<style>
.blok1 {
float:left; /* плавающий блок – прижали к левой части*/
padding:10px;
width:100px;
height:100px;
border:1px solid #666;
background:#ccc;
}
.blok2 {
float:right; /* плавающий блок – прижали к правой части*/
padding:10px;
width:100px;
height:100px;
border:1px solid red;
background:#cc0000;
}
.blok3 {
float:right; /* плавающий блок – прижали к правой части*/
padding:10px;
width:100px;
height:100px;
border:1px solid #000;
background:#c45000;
}
</style>
</head>
<body>
<div>первый блок</div>
<div>второй блок</div>
<div>третий блок</div>
</body>
</html>

Результат с правилом «float»:

Ну, как вам результат?

Свойства «CLEAR»
Если задать блоку правило «float», то стоит упомянуть правило «clear».
Правило «clear» устанавливает, с какой стороны элемента запрещено обтекание другими элементами.

Значение:

  • left — Обтекание запрещено с левой стороны
  • right — Обтекание запрещено с правой стороны
  • both — Обтекание запрещено с левой и правой стороны
  • none — Обтекание разрешено с левой и правой стороны (значение по умолчанию).

Синтаксис:

clear: значение;

Для примера создадим четвертый блок и пройдемся по всем значениям.

Пример без правила «clear»:



<html>
<head>
<title>Блоки в css</title>
<style>
.blok1 {
float:left;
padding:10px;
width:100px;
height:100px;
border:1px solid #666;
background:#ccc;
}
.blok2 {
float:right;
padding:10px;
width:100px;
height:100px;
border:1px solid red;
background:#cc0000;
}
.blok3 {
float:right;
padding:10px;
width:100px;
height:100px;
border:1px solid #000;
background:#c45000;
}
.blok4 {
float:right;
background:#c45;
width:223px;
height:100px;
padding:10px;
border:1px solid #000;
}
</style>
</head>
<body>
<div>первый блок</div>
<div>второй блок</div>
<div>третий блок</div>
<div>четвертый блок</div>
</body>
</html>

Результат без правила «clear»:

Хм, все хорошо, но как сделать так, чтобы четвертый блок был с правой стороны под всеми остальными блоками, то есть снизу. Вот тут нам и пригодится правило «clear».

Пример с правилом «clear» — значение «left»:
Прижмем четвертый блок к правой стороне и запретим обтекание с правой стороны.


.blok4 {
float:right;
clear:left;
background:#c45;
width:223px;
height:100px;
padding:10px;
border:1pxsolid #000;
}

Результат с правилом «clear» — значение «left»:

Пример с правилом «clear» — значение «right»:
Прижмем четвертый блок к левой стороне и запретим обтекание с левой стороны.


.blok4 {
float:left;
clear:right;
background:#c45;
width:223px;
height:100px;
padding:10px;
border:1pxsolid #000;
}

Результат с правилом «clear» — значение «right»:

Пример с правилом «clear» — значение «both»:


.blok4 {
clear:both;
background:#c45;
width:223px;
height:100px;
padding:10px;
border:1px solid #000;
}

Результат с правилом «clear» — значение «both»:

Я думаю, что правило «clear» со значением «none» нет смысла показывать, так как оно является и так по умолчанию.

Дополнение

Для тех, кто дочитал до конца показываю маленький пример, как сделать горизонтальное меню (если вы используете для меню списки <ul><li>).

Например, пропишите в HTML:


<ul>
<li><a href="#">Пункт 1</a></li>
<li><a href="#">Пункт 2</a></li>
<li><a href="#">Пункт 3</a></li>
<li><a href="#">Пункт 4</a></li>
<ul>

Для оформления пропишите вот такие стили в CSS:


.menu{
list-style:none;
}
.menu li a{
display:block;
padding:10px;
background:#ccf;
}
.menu li{
margin:5px;
}

Результат:

Меню получилось вертикальным. Чтобы сделать горизонтальным, добавьте уже известное вам правило «float» со значением «left» к классу «menu li»:

Пример:


<html>
<head>
<title>Блоки в css</title>
<style>
.menu{
list-style:none;
}
.menu li a{
display:block;
padding:10px;
background:#ccf;
}
.menu li{
margin:5px;
float:left;
}
</style>
</head>
<body>
<ul>
<li><a href="#">Пункт 1</a></li>
<li><a href="#">Пункт 2</a></li>
<li><a href="#">Пункт 3</a></li>
<li><a href="#">Пункт 4</a></li>
<ul>
</body>
</html>

Результат:

Вот и все! Фух! Справился вроде как! 

Жду вас на следующих уроках! Осталось совсем чуть-чуть.

Предыдущая запись
Позиционирование блоков CSS. Основы CSS для начинающих. Урок №14 Следующая запись
Слои в CSS. Основы CSS для начинающих. Урок №16

Плавающие блоки в CSS (свойство float)

Благодаря так называемым плавающим блокам можно построить любой каркас сайта. Так что, внимательно разберите эту тему.

Свойство FLOAT

Свойство float определяет, в какую сторону перемещать плавающий блок.

Значения свойство float:

float: left| right | none;

left — блок прижат к левому краю. Текст будет обтекать справа;

right — блок прижат к правому краю. Текст будет обтекать слева;

none – перемещение блоков выключено (значение по умолчанию).

Давайте теперь посмотрим все на примере.
Есть стандартный код, где все блоки идут без свойства float.

Пример:


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "https://www.w3.org/TR/html4/strict.dtd">
<html>
 <head>
 <title>Блок в css</title>
 <style ENGINE="text/css">
 .blok1 {
padding:10px;
width:100px;
height:100px;
border:1px solid red;
background:#ccc;
}
.blok2 {
padding:10px;
width:100px;
height:100px;
border:1px solid red;
background:#cc0000;
}
.blok3 {
padding:10px;
width:100px;
height:100px;
border:1px solid red;
background:#c45000;
}
 </style>
 </head>
 <body>
<div>1-ый блок</div>
<div>2-ой блок</div>
<div>3-ий блок</div>
 </body>
</html>

Результат:

Плавающие блоки в CSS (свойство float)

Теперь воспользуемся свойством float, чтобы прижать 1-ый и  2-ой блок к левой части, а 3-ий блок к правой.

Пример:


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "https://www.w3.org/TR/html4/strict.dtd">
<html>
 <head>
 <title>Блок в css</title>
 <style type="text/css">
 .blok1 {
padding:10px;
width:100px;
height:100px;
border:1px solid red;
background:#ccc;
float:left;
}
.blok2 {
padding:10px;
width:100px;
height:100px;
border:1px solid red;
background:#cc0000;
float:left;
}
.blok3 {
padding:10px;
width:100px;
height:100px;
border:1px solid red;
background:#c45000;
float:right;
}
 </style>
 </head>
 <body>
<div>1-ый блок</div>
<div>2-ой блок</div>
<div>3-ий блок</div>
 </body>
</html>

Результат:

Плавающие блоки в CSS (свойство float)

Теперь стоит упомянуть о свойстве  CLEAR.

Свойство CLEAR

Благодаря свойству  CLEAR блоки можно ставить под блоками. Вы сейчас поймете.

Значения свойства CLEAR:

clear: left | right | both | none;

left — блок будет размещаться ниже всех левосторонних плавающих блоков, и обтекать с левой стороны не будет;

right — блок будет размещаться ниже всех правосторонних плавающих блоков, и обтекать с правой стороны не будет;

both — блок будет размещаться ниже всех плавающих блоков, и запрещать обтекание с обеих сторон;

none – свойство CLEAR отключено (по умолчанию).

Для примера я создам еще один блок, четвертый, и размещу его с правой стороны внизу под вторым и третьим блоком.

Пример:


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "https://www.w3.org/TR/html4/strict.dtd">
<html>
 <head>
 <title>Блок в css</title>
 <style type="text/css">
 .blok1 {
padding:10px;
width:100px;
height:100px;
border:1px solid red;
background:#ccc;
float:left;
}
.blok2 {
padding:10px;
width:100px;
height:100px;
border:1px solid red;
background:#cc0000;
float:right;
}
.blok3 {
padding:10px;
width:100px;
height:100px;
border:1px solid red;
background:#c45000;
float:right;
}
.blok4 {
padding:10px;
width:222px;
height:100px;
border:1px solid red;
background:#c45450;
float:right;
clear:right;
}
 </style>
 </head>
 <body>
<div>1-ый блок</div>
<div>2-ой блок</div>
<div>3-ий блок</div>
<div>4-ий блок</div>
 </body>
</html>

Результат:

Свойство CLEAR

А вот, если к третьему блоку добавить ширину 90% и убрать свойство float, то…

Пример:


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "https://www.w3.org/TR/html4/strict.dtd">
<html>
 <head>
 <title>Блок в css</title>
 <style type="text/css">
 .blok1 {
padding:10px;
width:100px;
height:100px;
border:1px solid red;
background:#ccc;
float:left;
}
.blok2 {
padding:10px;
width:100px;
height:100px;
border:1px solid red;
background:#cc0000;
float:right;
}
.blok3 {
padding:10px;
width:90%;
height:100px;
border:1px solid red;
background:#c45000;

}
.blok4 {
padding:10px;
width:100px;
height:100px;
border:1px solid red;
background:#c45450;
float:right;
clear:right;
}
 </style>
 </head>
 <body>
<div>1-ый блок</div>
<div>2-ой блок</div>
<div>3-ий блок</div>
<div>4-ий блок</div>
 </body>
</html>

…получится каркас сайта:

Свойство CLEAR

Поздравляю!!! Вы только что закончили самую сложную, но необходимую тему «Блоки в CSS». Закрепите материал на примерах. Потренируйтесь. Поэкспериментируйте.

Понравился пост? Помоги другим узнать об этой статье, кликни на кнопку социальных сетей ↓↓↓


Последние новости категории:

Похожие статьи

Популярные статьи:

Добавить комментарий

Метки: css, полезные статьи

CSS — Работа с плавающими элементами

Плавающий элемент — это блочный элемент, у которого установлено CSS свойство float со значением left или right. Располагается плавающий элемент следующим образом: он открепляется от своего текущего места (текущее место — это место, которое занимал бы блочный элемент, если он был бы не плавающим) и располагается по вертикали (верхняя граница плавающего элемента выравнивается по верхней границе текущей строки) и горизонтали (в зависимости от значения свойства float плавающий элемент будет прикрепляться насколько возможно к левому или правому краю родительского элемента). Остальное содержимое, расположенное после плавающего элемента в этом контейнере обтекает этот плавающий элемент с противоположной стороны. Место, которое он занимал бы, если бы не был плавающим, не закрепляется за ним, и его место будет занимать элементы контейнера, расположенные после плавающего элемента. Также необходимо учитывать то, что высота плавающего блока не влияет на высоту блока контейнера, в которую он помещён.

Например: высота контейнера, в который помещён только плавающий блок будет равна 0.

Высота контейнера, в который помещён плавающий блок

Рассмотрим расположение плавающих блоков на примере. Для начала создадим 3 блока с разным фоном и разместим их в контейнере, который имеет высоту 350px и внутренние отступы с каждой стороны (padding) по 20px. По умолчанию блочные элементы будут занимать всю ширину контейнера, и располагаться один под другим.


<div>
  <div></div>
  <div></div>
  <div></div>
</div>

Расположение блочных элементов в контейнере

Теперь с помощью свойства float изменим 2 блок на плавающий и установим ему ширину равную 120px. Задание ширины для плавающих блоков является обязательным условием. После изменения блочный элемент 3 стал обтекать плавающий блок с противоположной стороны.


<div>
  <div></div>
  <div></div>
  <div></div>
</div>

Расположение блоков, один из которых является плавающим

Теперь изменим высоту блочного элемента 3 и заметим, что после обтекания плавающего элемента блочный элемент 3 выравнивается по левому краю.


<div>
  <div></div>
  <div></div>
  <div></div>
</div>

Расположение блоков при увеличении высоты 3 блока

Теперь и 1 блок сделаем плавающим, дополнительно установив ему ширину 120px и высоту 150px. 2 плавающий блок (красный) будет стремиться прикрепиться насколько возможно к левому краю родительского элемента, но 1 блок ему будет мешать, следовательно, он прикрепиться к правому краю 1 блока.


<div>
  <div></div>
  <div></div>
  <div></div>
</div>

Расположение блоков, 2 из которых являются плавающими

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

Расположение плавающих элементов при уменьшении ширины контейнера

Способы отмены обтекания

Плавающие блоки очень часто применяются при вёрстке веб-страниц. Однако бывают ситуации и довольно часто, когда необходимо отменить блоку обтекание с одной или с двух сторон. Существует несколько способов как это сделать:

  1. С помощью CSS свойства clear, которое имеет значение left (отменяет обтекание с левого края элемента), right (отменяет обтекание с правого края) или both (отменяет обтекание элемента одновременно с левого и правого краёв). В зависимости от ситуации это свойство можно применить непосредственно к блоку или создать пустой блок div со свойством clear и соответствующим значением. Например: <div></div> — этот блок не обтекает плавающий элемент с левого и правого краёв. 
    
<div>
  <div></div>
  <div></div>
  <div></div>
</div>
    Отмена обтекания с помощью свойства clear
  2. С помощью CSS свойства overflow со значением auto или hidden. Принцип заключается в том, что плавающие элементы помещаются в контейнер div, которому добавляется свойство overflow. Но будьте осторожны со свойством overflow и просчитайте возможные размеры плавающих элементов. 
    
<div>
  <div>
    <div></div>
    <div></div>
  </div>
  <div></div>
</div>
    Отмена обтекания с помощью свойства overflow
  3. С помощью псевдоэлемента :after. Данный способ заключается в добавление невидимого блока, который отменяет обтекание. 
    
<style type="text/css">
.clearfix:after {
	content		: "."; <!-- Выводит точку -->
	visibility	: hidden; <!-- прячем точку -->
	display		: block; <!-- Элемент является блочным -->
	height		: 0; <!-- Высота блока равна 0 -->
	clear		: both; <!-- Отменяем обтекание -->
}
</style>
...
<div>
  <div>
    <div></div>
    <div></div>
  </div>
  <div></div>
</div>
    Отмена обтекания с помощью псевдоэлемента :after

Изменение высоты контейнера, содержащего плавающий блок

Как мы уже отмечали выше то, что на высоту контейнера не оказывает ни какое влияние высота плавающих блоков. Давайте рассмотрим способы, с помощью которых мы заставим растянуться контейнер на высоту дочернего плавающего блока.
  1. С помощью свойства clear. Для этого необходимо поместить пустой контейнер с этим свойством после плавающего блока. 
    
<div>
  <div></div>
  <div></div>
</div>
  2. С помощью свойства overflow. Для этого необходимо создать контейнер и поместить в него плавающие блоки. Затем добавить к контейнеру стиль со свойством overflow, которому задать значение hidden или auto. 
    
<div>
  <div></div>
</div>
    Изменение высоты контейнера с помощью свойства overflow

Анимированная выдвижная боковая блок-панель на CSS


Пример работы боковой панели на CSS можно просмотреть по ссылке ниже.Демонстрация Скачать исходники
Наверное Вы часто видели панельки справа или слева с акцией, консультацией и чем-либо другим. Так давайте рассмотри как реализовать такой анимированный блок только на CSS 3, без применения JS

Вставляем следующие блоки в код

Код HTML

<div id="panel"> >>>

    <div id="hidden_panel">

        Содержание блока

    </div>

</div>

Код CSS

/* ВНЕШНИЙ БЛОК */

#panel {

    position: fixed; /* положение */

    top: 100px; /* отступ сверху */

    left: 0; /* отступ слева */

    background: green; /* цвет фона */

    width: 30px; /* ширина блока */

    height: 40px; /* высота блока */

    font: 14px Arial; /* размер и тип шрифта */

    color: #fff; /* цвет текста */

    text-align: center; /* выравнивание текста по центру */

    padding: 5px; /* отступы от границ внутри блока */
    -webkit-transition-duration: 0.3s; /* анимационное выдвижение для всех браузеров*/

    -moz-transition-duration: 0.3s;

    -o-transition-duration: 0.3s;

    transition-duration: 0.3s;
    -webkit-border-radius: 0 5px 5px 0; /* закругление границ для всех браузеров*/

    -moz-border-radius: 0 5px 5px 0;

    border-radius: 0 5px 5px 0;

    }
/* СКРЫТЫЙ БЛОК */

#hidden_panel {

    position: fixed; /* положение */

    top: 100px; /* отступ сверху */

    left: -220px; /* отступ слева */

    background: lavender; /* цвет фона */

    color: #000; /* цвет текста */

    width: 200px; /* ширина блока */

    height: 150px; /* высота блока */

    padding: 10px; /* отступы от границ внутри блока */

    text-align: left; /* выравнивание текста */
    -webkit-transition-duration: 0.3s; /* анимационное выдвижение для всех браузеров*/

    -moz-transition-duration: 0.3s;

    -o-transition-duration: 0.3s;

    transition-duration: 0.3s;
    -webkit-border-radius: 0 5px 5px 0; /* закругление границ для всех браузеров*/

    -moz-border-radius: 0 5px 5px 0;

    border-radius: 0 5px 5px 0;

    }

#panel:hover {

    left: 220px; /* при наведении выдвигается на скрытые 200px + 20px отступы */

}

#panel:hover #hidden_panel {

    left: 0; /* отступ слева */

}

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *