StepkinBlog.ru
Пока я творю, я живу!
Блог посвящен: HTML, CSS, PHP, Wordpress, Bootstrap
16.03.2017
13:43
10532
7
Плавающие блоки в 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»:
Как видите, все блоки оказались один под одним.
Теперь посмотрим, как будут себя вести блоки с правилом «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»:
Ну, как вам результат?
Свойства «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»:
Хм, все хорошо, но как сделать так, чтобы четвертый блок был с правой стороны под всеми остальными блоками, то есть снизу. Вот тут нам и пригодится правило «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 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;
}
Результат:
Меню получилось вертикальным. Чтобы сделать горизонтальным, добавьте уже известное вам правило «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>
Результат:
Вот и все! Фух! Справился вроде как! 
Жду вас на следующих уроках! Осталось совсем чуть-чуть.
Привет! А как сделать блок-ссылку?
Ответить
21 февраля, 2018 at 07:57
Здравствуйте, Сергей!
<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>Подробней о ссылках, Вы можете почитать тут
Ответить
23 февраля, 2018 at 03:48
Спасибо! У меня вот такая проблем, есть CMS, в ней файл: functions.php: (Как вам отправить файл не знаю).
Вот сайт: [ссылка удалена]
Я хочу над каждой категории поставить блок картинку, соответствующую ею. Но получается что когда я вставляю блок-картинку, то эта картинка вставляется во все категории, одна и та же, вот пример, только без подкатегорий: [ссылка удалена]
28 февраля, 2018 at 08:40
<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>Вот файл: [ссылка удалена]
Ответить
28 февраля, 2018 at 08:45
Простите, Сергей, но в Вашей CMS нет времени разбираться.
В этом уроке я рассказываю про основы CSS, а не то, как вставлять код в CMS.
Если хотите, можете воспользоватся формой обратной связи, я Вам все сделаю, естественно за оплату.
Ответить
10 марта, 2018 at 13:38
Не надо, я уже сам сделал!