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

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

    Custom plugins and WordPress themes
    Шаблоны страниц в WordPress являются отличным способом изменить структуру страниц или добавить им функциональности. Создание собственного шаблона страниц может быть не простым делом, особенно для новичков,

    Продукт WooCommerce
    Каждый умный человек в современном мире прекрасно понимает, что в двадцать первом веке просто нельзя упускать возможность узнать или же научиться чему-либо новому. Особенно, если речь касается электронной

    Магазин видеонаблюдения
    При создании системы видеонаблюдения необходим целый ряд определенного оборудования. Для этого сегодня существует огромное количество различных магазинов по продаже специальной техники для организации

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

    Тайверб Тайверб
    Прочие ингредиенты: целлюлоза микрокристаллическая, повидон К30, натрия крахмалгликолят, магния стеарат, opadry желтый YS-1-12524-A. Лапатиниб содержится в форме лапатиниба дитосилата моногидрата. № UA/8847/01/01

    Шкафы купе в наличии
    Известно, что шкафы-купе поступили в ассортимент магазинов корпусной мели более 20 лет назад и сразу же заняли ведущие роли среди другой мебели. Их используют в помещениях, где разместить стандартный

    Копаксон
    Конкурентно замещает антигены миелина в местах связывания с молекулами главного комплекса гистосовместимости класса II на поверхности клеток, несущих антигены. Следствием этого является активация образования

    Begin.com.ua/
    Подбором персонала занимается HR-менеджер, но часто такая должность отсутствует в компании, и его обязанности берут на себя или директор, или его заместитель. Если выбор сотрудников окажется неправильным 

    Бесплатная раскрутка сайтов ucoz
    Необходимо для себя выяснить, какая цель преследуется при раскрутке Интернет проекта. Здесь всё просто, так как чаще всего это возможность при помощи различных способов и средств увеличить поток посетителей.

rss