- •1. Основы css
- •2. Синтаксис и принцип работы css
- •Css Комментарии
- •Внешняя Таблица Стилей
- •Внутренняя таблица стилей
- •Встроенные стили
- •Несколько таблиц стилей
- •Как Несколько Стилей Соединяются в Один
- •Порядок соединения
- •4. Цвет и фон в css
- •Все Фоновые Свойства css
- •5. Шрифты в css
- •Все css Свойства Шрифта
- •6. Текст в css
- •Все Текстовые Свойства css
- •7. Списки в css
- •Все css Свойства Списка
- •8. Ссылки в css
- •9. Типы селекторов в css
- •10. Таблицы
- •12. Рамки в css
- •Урок 13: Поля (margin) и отступы (padding)
- •14: Высота(height) и ширина(width) блоков
- •15: Позиционирование блоков
- •16: Плавающие блоки(свойство float)
- •17: Слои в css
16: Плавающие блоки(свойство float)
В этом уроке я вкратце коснусь такой вещи как плавающие блоки. Вообще , с помощью плавающих блоков можно создавать различные эффекты и даже дизайн страниц, т.н. блочный дизайн. Большинство современных сайтов строятся именно по блочному принципу. Поэтому, мне кажется , что очень важно разобраться как это работает!
Итак, Плавающие блоки в CSS определяются свойством float.
Свойства FLOAT
Данное свойство определяет, будет ли блок плавающим и в какую сторону он будет перемещаться. Свойство может принимать следующие значения.
left - структурный блок перемещается влево. Остальное содержимое документа будет выводиться вдоль правой стороны блока, начиная с самого верха.
right - структурный блок перемещается вправо. Остальное содержимое документа выводится вдоль левой стороны блока, начиная с самого верха.
none - блок не перемещается (значение по умолчанию).
Ну вот например, как будут располагаться по умолчанию ,три квадратных блока, со стороной в 200 пикселей.
html код :
<div class="box1">Первый блок</div> <div class="box2">Второй блок</div> <div class="box3">Третий блок</div>
CSS код :
.box1 { width:200px; height:200px; border:1px solid red; background-color:orange; } .box2 { width:200px; height:200px; border:1px solid red; background-color:orange; } .box3 { width:200px; height:200px; border:1px solid red; background-color:orange; }
Смотреть пример
Как видите, по умолчанию каждый следующий блок, находится под предыдущим.
Используя свойство float можно сделать так, чтобы каждый блок всплывал влево, т.е. это будет выглядеть так:
.box1 { width:200px; height:200px; border:1px solid red; background-color:orange; float:left; } .box2 { width:200px; height:200px; border:1px solid red; background-color:orange; float:left; } .box3 { width:200px; height:200px; border:1px solid red; background-color:orange; float:left; }
Смотреть пример
Вот как будет выглядеть, если блоки будут всплывать вправо:
.box1 { width:200px; height:200px; border:1px solid red; background-color:orange; float:right; } .box2 { width:200px; height:200px; border:1px solid red; background-color:orange; float:right; } .box3 { width:200px; height:200px; border:1px solid red; background-color:orange; float:right; }
Смотреть пример
Классический пример применения - это когда надо сделать чтобы текст выводился в колонках. Пусть колонки будет три.
CSS код:
.column1 { float:left; width: 33%; } .column2 { float:left; width: 33%; } .column3 { float:left; width: 33%; }
В html-коде просто заключим необходимый текст в соответствующие колонки, тегами DIV
<div class="column1"> <p>There is one universal truth in website making: To make a websitet...</p> </div> <div class="column2"> <p> If you're like the vast majority of people thinking ...</p> </div> <div class="column3"> <p>There is one universal truth in website...</p> </div>
Смотреть пример
Говоря о плавающих блоках, необходимо упомянуть также о свойстве CLEAR - специфическое свойство, позволяющее определенным образом позиционировать плавающие блоки.
left - блок должен размещаться ниже всех левосторонних плавающих блоков.
right - блок должен размещаться ниже всех правосторонних плавающих блоков.
both - блок должен размещаться ниже всех плавающих блоков.
none - никаких ограничений на положение блока относительно перемещаемых объектов не накладывается.
Ну допустим имеется два плавающих влево блока(float:left;), которые обтекает текст.
Смотреть пример
Если заключить весь текст в блок, и придать ему свойство CLEAR:BOTH т.е. чтобы он размещался ниже всех плавающих блоков, можно избавиться от обтекания блоков текстом.
html-код
<div class="box1">Первый блок</div> <div class="box2">Второй блок</div> <div class="box3"> <p>There is one universal truth in website...</p> </div>
CSS-часть
.box1 { width:200px; height:200px; border:1px solid red; background-color:orange; float:left; } .box2 { width:200px; height:200px; border:1px solid red; background-color:orange; float:left; } .box3 { clear:both; }
Смотреть пример
Заметьте, что в блоках может находится что угодно(картинки, списки,текст и др.)
Вот Вам еще один пример, когда один блок располагается под другим, и оба блока обтекаются текстом.
html-код
<div class="box1">Первый блок</div> <div class="box2">Второй блок</div> <p>There is one universal truth in website...</p>
css- часть
.box1 { width:200px; height:200px; border:1px solid red; background-color:orange; float:left; } .box2 { width:200px; height:200px; border:1px solid red; background-color:orange; float:left; clear:both; }
Смотреть пример
В общем вариантов применения может быть много. Экспериментируйте, если хотите.
Если хотите посмотреть, как использовать плавающие блоки для создания каркаса сайта, Вам сюда .