Загрузка

RUS | ANG | |

StepkinBlog.ru

Пока я творю, я живу!
Блог посвящен: HTML, CSS, PHP, Wordpress, Bootstrap

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

16.03.2017


13:43


3291


7


Плавающие блоки в 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 class="blok1">первый блок</div>
<div class="blok2">второй блок</div>
<div class="blok3">третий блок</div>
</body>
</html>

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

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

Как видите, все блоки оказались один под одним.
Теперь посмотрим, как будут себя вести блоки с правилом «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 class="blok1">первый блок</div>
<div class="blok2">второй блок</div>
<div class="blok3">третий блок</div>
</body>
</html>

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

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

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

Свойства «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 class="blok1">первый блок</div>
<div class="blok2">второй блок</div>
<div class="blok3">третий блок</div>
<div class="blok4">четвертый блок</div>
</body>
</html>

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Дополнение

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

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

<ul class="menu">
<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;
}

Результат:

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

Меню получилось вертикальным. Чтобы сделать горизонтальным, добавьте уже известное вам правило «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 class="menu">
<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 для начинающих. Урок №15

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

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



Случайные записи:

  1. Слои в CSS. Основы CSS для начинающих. Урок №16
  2. Шрифты в CSS. Основы CSS для начинающих. Урок №6
  3. Cкелет HTML. Основы HTML для начинающих. Урок №1
  4. Цикл While (Do- While). Основы PHP с нуля. Урок №11
  5. Бегущая строка на HTML. Основы HTML для начинающих. Урок №9

Последние записи рубрики:

  1. Бесплатный курс по основам CSS
  2. Создание сайта с нуля на HTML + CSS. Практика по пройденному материалу
  3. Тесты CSS онлайн. Основы CSS для начинающих
  4. Слои в CSS. Основы CSS для начинающих. Урок №16

7 ответа(ов) на статью: “Плавающие блоки в CSS. Основы CSS для начинающих. Урок №15”

  1. Сергей says:

    Привет! А как сделать блок-ссылку?

    Ответить

    Степка
    Степка ответил(а) на комментарий:

    Здравствуйте, Сергей!

    <html>
    <head>
    <title>Блок в css</title>
    <style>
    .blok1 {
    float:left; /* плавающий блок – прижали к левой части*/
    padding:10px;
    width:100px;
    height:100px;
    border:1px solid #666;
    background:#ccc;
    }
    </style>
    </head>
    <body>
    <a href="http://stepkinblog.ru/"><div class="blok1">первый блок</div></a>
    </body>
    </html>
    

    Подробней о ссылках, Вы можете почитать тут

    Ответить

    Сергей ответил(а) на комментарий:

    Спасибо! У меня вот такая проблем, есть CMS, в ней файл: functions.php: (Как вам отправить файл не знаю).
    Вот сайт: [ссылка удалена]
    Я хочу над каждой категории поставить блок картинку, соответствующую ею. Но получается что когда я вставляю блок-картинку, то эта картинка вставляется во все категории, одна и та же, вот пример, только без подкатегорий: [ссылка удалена]

    Степка
    Степка ответил(а) на комментарий:
    <html>
    <head>
    <title>Блоки в css</title>
    <style>
    .blok{
    list-style:none;
    }
    .blok li a{
    display:block;
    padding:10px;
    background:#ccf;
    }
    .blok li{
    margin:5px;
    float:left;
    }
    </style>
    </head>
    <body>
    <ul class="blok">
    <li><center><img src="krtinka.jpg"><p>текст</p></center></li>
    <li><center><img src="krtinka.jpg"><p>текст</p></center></li>
    <li><center><img src="krtinka.jpg"><p>текст</p></center></li>
    <li><center><img src="krtinka.jpg"><p>текст</p></center></li>
    <li><center><img src="krtinka.jpg"><p>текст</p></center></li>
    <li><center><img src="krtinka.jpg"><p>текст</p></center></li>
    <ul>
    </body>
    </html>
    
  2. Сергей says:

    Вот файл: [ссылка удалена]

    Ответить

    Степка
    Степка ответил(а) на комментарий:

    Простите, Сергей, но в Вашей CMS нет времени разбираться.
    В этом уроке я рассказываю про основы CSS, а не то, как вставлять код в CMS.
    Если хотите, можете воспользоватся формой обратной связи, я Вам все сделаю, естественно за оплату.

    Ответить

    Сергей ответил(а) на комментарий:

    Не надо, я уже сам сделал!

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

;-) :| :x :twisted: :smokes: :smile: :shock: :sad: :rose: :roll: :razz: :pop-corne: :oops: :o :mrgreen: :lol: :idea: :grin: :gazeta: :evil: :cry: :cool: :coffe: :arrow: :???: :?: :!:

Подписаться на обновления:

Подпишись на обновления моего блога через e-m@il:

@

Реклама на блоге:

Мои цели на
2017 год:

Довести количество статей до 150

Доделать этот блог

Закончить тему «Основы CSS»

Закончить тему «Основы PHP»

Начать тему «Основы JavaScript»

Добиться посещаемости 500 чел/сутки

Статистика:

Записей: 104
Страниц: 3
Рубрик: 9
Меток: 11
Комментариев: 245