Урок 16. Свойство float

Здравствуй, уважаемый читатель.

Это шестнадцатый урок изучения CSS. В этом уроке мы рассмотрим важное свойство CSS, такое как float. Также мы создадим каркас сайта на основе данного свойства.

Перед изучением данного урока пройдите предыдущие уроки:

Урок 1. Что такое CSS?
Урок 2. Базовые селекторы
Урок 3. Групповые селекторы и селекторы потомков
Урок 4. Псевдоселекторы ссылок
Урок 5. Шрифты
Урок 6. Оформление текста
Урок 7. Рамки
Урок 8. Оформление списков
Урок 9. Наследование
Урок 10. Блочная модель
Урок 11. Высота и ширина блока
Урок 12. Конфликты полей
Урок 13. Работа с изображениями. Часть 1
Урок 13. Работа с изображениями. Часть 2
Урок 14. Таблицы
Урок 15. Формы

Теория и практика

Свойство, которое мы изучим в данном уроке очень важно для дальнейшего понимания всей работы с шаблонами для сайтов. Данное свойство, как я уже писал в начале статьи отвечает за обтекание. В html вы уже изучали пример обтекания на примере изображений — Перейти.

Свойство float на примере изображения

Для примера возьмем следующую html страницу:

<html>
<head>
    <title>Главная</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
    <div id="content">
        <img src="bear.jpg" class="forImg" width="350" height="253" alt="Медведь">
        <p>Nullam arcu libero, consequat ac libero in, consequat feugiat leo. Fusce semper nibh sit amet leo adipiscing suscipit. Donec a lectus condimentum, tincidunt eros in, pretium enim.</p>
        <p>Vivamus fringilla posuere erat, sed eleifend dolor tempus a. Duis tristique ullamcorper diam, at convallis nibh pulvinar tincidunt.</p>
    </div>
</body>
</html>

Сейчас мы имеем следующую страницу:

И затем меняя значение у свойства float располагаем изображение как нам надо. Применим обтекание слева:

1
2
3

.forImg{
    float:left;
}

Как это выглядит в браузере:

А сейчас применим обтекание справа:

1
2
3

.forImg{
    float:right;
}

Как это выглядит в браузере:

Как видите это очень похоже на обтекание, которое мы применяли в html. Но это лишь визуально кажется что оно похоже. На самом деле данный блок «приподнимается» над другими, а контент обтекает по контуру изображения. Чтобы стало понятнее представляю вам изображение:

Итак, на этом всё. Данный урок является очень простым и вы без труда его осилите. В следующем уроке мы создадим каркас сайта на основе данного свойства. И вы увидите что всё очень легко и просто. Обязательно попробуйте данное свойство на практике.

Предыдущий урок

Следующий урок