«Единственный способ творить великие дела – это любить то, что ты делаешь»
CSS
site.komp36.ru Создание сайтов. Твой сайт фотографа Что есть на сайте? Несколько фото галерей: свадебная, постановочная съемка, love story, детские фото. Договор на фотосъемку, прайс-лист.
site.komp36.ru Продающий лендинг «Установка и продажа окон» Установка и продажа окон, установка дверей, перегородок. Одностраничный продающий сайт. Заявки прямо с сайта
site.komp36.ru Универсальный лендинг. Любая тема сайта - 4900 руб. Лендинг адаптируется под любую тему: ремонт, отделка, продажа окон, дверей, лестниц, мебели и многое другое
site.komp36.ru Создание сайтов. Сайт сервисного центра. Сайт компании. Новости и отзывы. Несколько прайс-листов – под каждый отдельная страница. Возможность размещения статей


Элементы, к которым применено свойство float, получили название "Плавающие".

Свойство применимо ко всем элементам, кроме позиционированных.

Но не смотря на это свойство float совместно со свойством clear по своему влияют на позиционирование элементов на странице.



Свойство float - Обтекание элементов

В основном плавающие элементы применяются при обтекании какого-либо объекта (рисунок, изображение, текст в рамке и т.д.) текстом.

Плавающий объект смещается влево или вправо (значения left и right свойства float соответственно), а текст располагается на свободной стороне. Но не обязательно текст: это может быть все что угодно.

Фрагмент кода

<p> <img src="img/peng_64.png"> </p>
<p>
Элементы расположены по умолчанию: содержимое первого абзаца (пингвин) расположен слева, а текст следующего абзаца начинается с новой строки. </p>

<p>
<img src="img/peng_64.png" style="float:right;"> </p>
<p>
Теперь, как Вы видите, пингвин расположился справа, а текст следующего абзаца обтекает его слева. </p>

Результат

Плавающие элементы

Элементы расположены по умолчанию: содержимое первого абзаца (пингвин) расположен слева, а текст следующего абзаца начинается с новой строки.

Плавающие элементы

Теперь, как Вы видите, пингвин расположился справа, а текст следующего абзаца обтекает его слева.


Значение none является значением по умолчанию для свойства float. При этом свойство никак себя не проявляет: элементы располагаются в привычном для всех порядке.

Расположение элементов по горизонтали

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

Рассмотрим пример, когда три абзаца необходимо разместить рядом друг с другом в горизонтальной плоскости. Естественно, содержимое абзацев может быть любым.

Напомним, что абзац (тег <p>) - это блочный элемент. И по умолчанию абзацы располагаются друг под другом.

Фрагмент кода

<div style="width:700px">

<p style="border:#CC0033 solid 1px; padding:5px; width:185px; float:left;"> Первый абзац
</p>
<p style="border:#CC0033 solid 1px; padding:5px; width:185px; float:left; ">
Второй абзац
</p>
<p style="border:#CC0033 solid 1px; padding:5px; width:185px; float:left;">
Третий абзац
</p>
<p style="font-size
:18px;"> А это четвертый абзац. </p>

</div>

Результат

Как видите, четвертый абзац обтекает расположившиеся в ряд абзацы: для третьего абзаца задано значение left свойства float и, следовательно, часть последующего текста располагается на свободной стороне - справа.

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

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

Но существует иной вариант...

Свойство clear - Отменяем обтекание

Есть возможность отменить обтекание плавающего элемента.

Свойство clear вносит такую поправку.

Свойство применимо к блочным и плавающим элементам.

В нашем примере необходимо для четвертого абзаца свойству clear присвоить значение left, то есть отменить обтекание плавающего элемента (третьего абзаца), смещенного влево с помощью свойства float.

Фрагмент кода

<div style="width:700px">

<p style="border:#CC0033 solid 1px; padding:5px; width:185px; float:left;"> Первый абзац
</p>
<p style="border:#CC0033 solid 1px; padding:5px; width:185px; float:left; ">
Второй абзац
</p>
<p style="border:#CC0033 solid 1px; padding:5px; width:185px; float:left;">
Третий абзац
</p>
<p style="font-size
:18px; clear:left;"> А это четвертый абзац. </p>

</div>

Результат

Соответственно значение right свойства clear отменяет обтекание элемента, смещенного вправо с помощью свойства float, а значение both вносит запрет на обтекание элемента, смещенного в любую сторону с помощью свойства float.

Значение по умолчанию none отменит действие свойства clear.

site.komp36.ruТвой сайт фотографа. Создание сайтов Что есть на сайте? Несколько фото галерей: свадебная, постановочная съемка, love story, детские фото. Договор на фотосъемку, прайс-лист.
site.komp36.ru Акция Как начать свое дело? Свой сайт «Укладка плитки» 9 000 руб. Лендинг адаптируется под любой вид отделочных работ, продажу товаров или услуг. Сайт поможет найти новых клиентов
site.komp36.ru Акция Продающий лендинг «Установка и продажа окон» 9 000 руб. Одностраничный продающий сайт. Установка и продажа окон, установка дверей, перегородок. Заявки прямо с сайта

CSS по шагам
Тематические публикации
site.komp36.ru Как начать свое дело? Свой сайт «Укладка плитки» 9 000 руб. Лендинг адаптируется под любой вид отделочных работ, продажу товаров или услуг. Сайт поможет найти новых клиентов
site.komp36.ru Продающий лендинг «Установка и продажа окон» 9 000 руб. Одностраничный продающий сайт. Установка и продажа окон, установка дверей, перегородок. Заявки прямо с сайта

Все cвойства CSS
Тематические публикации
site.komp36.ru Как начать свое дело? Свой сайт «Укладка плитки» 9 000 руб. Лендинг адаптируется под любой вид отделочных работ, продажу товаров или услуг. Сайт поможет найти новых клиентов
site.komp36.ru Продающий лендинг «Установка и продажа окон» 9 000 руб. Одностраничный продающий сайт. Установка и продажа окон, установка дверей, перегородок. Заявки прямо с сайта