Просмотров: 1 025

Свойство CSS float.

Настало время рассмотреть еще один очень важный способ, как можно заставить элементы выпасть из нормального потока.

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

Выглядит это примерно вот так:

05-05-2014 5-51-37

Создать такой эффект можно с помощью свойства CSS, которое называется float. Оно отвечает за обтекание элемента другими элементами.

float: left | right | none | inherit

По сути, блок может быть обтекаемым либо справа, либо слева.

Значение none говорит о том, что элемент должен выводиться в нормальном потоке.

inherit — значение свойства float наследуется от родительского элемента.

Давайте посмотрим, как работает это свойство на практике.

Для начала давайте проверим, что произойдет со строчными и блочными элементами, если им добавить свойство float.

1. Блочные элементы

<div style="background:#ccc; height:50px; ">Блочный элемент без свойства float</div>
<div style="background:#c9c; height:50px; float:left;">Блочный элемент со свойством float</div>

Блочный элемент перестает быть растянутым на всю ширину родительского элемента, но сохраняет остальные свойства блочного элемента.

2. Со строчными

<span style="background:#c9c; height:50px; width:250px; float:left;">Строчный элемент со свойством float</span>
<span style="background:#ccc; height:50px; width:250px;">Строчный элемент без свойства float</span>

Как видно из примера, строчный элемент, к которому применяется свойство float приобретает свойства блочного элемента: для него начинает работать свойство width и height.

Теперь давайте посмотрим, как элементы со свойством float будут взаимодействовать с остальными элементами.

<div style="background:#ccc; height:50px; ">Блочный элемент без свойства float</div>
<div style="background:#c9c; height:50px; float:left;">Блочный элемент со свойством float</div>
<div style="background:#9cc; height:50px; ">Блочный элемент без свойства float, который располагается после элемента с float.</div>

Как видно из примера, блочный элемент, который находился после блока со свойством float «наехал» на место в нормальном потоке, который занимает блок со свойством float.

Но теперь обратите внимание, что текст блочного элемента, который поднялся на верх, начал «обтекать» блок со свойством float.

Отсюда можно сделать вывод, что элементы со свойством float тоже выпадают из потока, но частично. Блочные элементы воспринимают это выпадание из потока и поднимаются на верх, а строчные элементы не воспринимают это выпадание и обтекают элементы с float.

Давайте еще раз убедимся в этом пронаблюдав эффект выпадание блока с float из родительского элемента и эффект обтекания текста при этом.

<div style="background:#c9c;">
   <div style="background:#9c9; float:left; width:50px;">
       Элемент с float
   </div>
   Родительский элемент    
</div>

Это основные принципы работы свойства float, которые нужно сейчас для себя понять. Потренируйтесь с примерами. Подавляйте элементам новые свойства, поменяйте их местами и.т.д., чтобы понять как это все работает.

Этот материал входит в соостав курса «Базовые приемы верстки веб-страниц»

К списку всех материалов курса. Доступ можно получить в группе вконтакте, в разделе «Ссылки».