Плавающие блоки в CSS (свойство float)
Опубликовано: 01.09.2018
Благодаря так называемым плавающим блокам можно построить любой каркас сайта. Так что, внимательно разберите эту тему.
Свойство 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 type="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 class="blok1">1-ый блок</div> <div class="blok2">2-ой блок</div> <div class="blok3">3-ий блок</div> </body> </html>Результат :
Теперь воспользуемся свойством 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 class="blok1">1-ый блок</div> <div class="blok2">2-ой блок</div> <div class="blok3">3-ий блок</div> </body> </html>Результат :
Теперь стоит упомянуть о свойстве 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 class="blok1">1-ый блок</div> <div class="blok2">2-ой блок</div> <div class="blok3">3-ий блок</div> <div class="blok4">4-ий блок</div> </body> </html>Результат :
А вот, если к третьему блоку добавить ширину 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 class="blok1">1-ый блок</div> <div class="blok2">2-ой блок</div> <div class="blok3">3-ий блок</div> <div class="blok4">4-ий блок</div> </body> </html>…получится каркас сайта:
Поздравляю!!! Вы только что закончили самую сложную, но необходимую тему «Блоки в CSS». Закрепите материал на примерах. Потренируйтесь. Поэкспериментируйте.
Понравился пост? Помоги другим узнать об этой статье, кликни на кнопку социальных сетей ↓↓↓
Последние новости категории:
Похожие статьи
Популярные статьи:
Добавить комментарий
Метки: css , полезные статьи