Плавающие блоки в 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 , полезные статьи

3D стерео фильмы для 5D
    Как купить билеты на поезд

    Я всегда в последнее время пользуюсь услугами настоящего интернет сайта. Он у меня внушает доверие. И здесь придбати квитки возможно в любое

    Товаров для дома
    Исходя из этих критериев, можно легко преподнести себя в том или ином деле. Хороший доход может быть на любой работе. Но хороших друзей на рабочем месте выбрать сложно. В такой ситуации больше побеждает

    Поступления в университет
    Перед всеми выпускниками школ и их родителями сейчас стоит задача – выбор предметов единого государственного экзамена (ЕГЭ). От того, какие ЕГЭ будут выбраны, зависит, поступит ребенок в ВУЗ или нет.

    Видеонаблюдение Novicam в Екатеринбурге
    По своей сути подключение видеорегистратора к локальной сети совершенно не отличается от подключения обычного компьютера к локальной сети.  Для того что бы система видеонаблюдения начала функционировать

    Кредит онлайн на картку
    Каждый из нас может оказаться в такой ситуации, когда срочно нужны деньги. И что же делать, если деньги понадобились прямо здесь и сейчас. В различных кредитных организациях оформление кредита может занять

    Комплект инсталляции Grohe 6в1
    Вместо обычного унитаза многие люди предпочитают, чтобы было сочетание инсталлированной конструкции унитаза с определенным видом отделки. Особенно такая инсталляция включают в себя раму, которая покрыта

    Авіаквитки купити
    В наше время все больше людей путешествуют с помощью самолета. Ведь авиаперевозки пассажирские стали намного доступнее. И приобрести билеты становится с каждым днём все легче и легче. К примеру, на данном

    Повербанк оптом
    В данной группе представлены переносные зарядные устройства Power Banks. Power Banks - Повер банк, Пауер банк, Павер банк, как только не переводят на русский язык. Единого мнения на счет перевода не будет.

    Cbd vape pen buy online
    Представители просвещенной части прогрессивного человечества сегодня являются активными приверженцами здорового образа жизни и предпочитают лечится только с помощью средств натурального происхождения.

    Зарплата ру
    Еженедельный журнал работа и зарплата вакансии в Москве выходит крупным тиражом в 100 тыс. экземпляров, имеет большую аудиторию читателей, среди которых люди с различным образованием, доходом и социальным

rss