Понятие о потоке. Особенности работы float

Float — самое страшное свойство для новичка в HTML. Именно потому, что c float не умеют работать. Float переводится как «всплывание». Из доступных значений этого свойства можно выбрать:

1
2
3
4
float: left;
float: right;
float: none;
float: inherit;
Давайте посмотрим, что происходит с элементами, когда к ним применяется свойство float:
  • Элемент «сплывает» и прижимается к левому (если float: left) или правому (float: right) краю родительского элемента или элемента которому тоже задано значение float
  • Если элемент из-за ширины родительского блока не может встать в один ряд с другим элементом, он будет сдвинут вниз до того момента пока ему не хватит места
  • Другие блочные элементы для которых значение float не задано ведут себя так, как будто элемента с float нет на странице (элемент «сплыл»). Строки «знают» что элемент всплыл и обтекают его
  • Ширина блока, для которого задано значение float — определяется по содержимому.

Рассмотрим пример. Расскоментируйте свойство float: left внутри CSS. Посмотрите на результат.

See the Pen float by Alex (@Asmodey) on CodePen.

Замените float:left на float: right.

Свойство float удобен для обеспечения обтекания картинок текстом. Рассмотрите пример:

See the Pen float by Alex (@Asmodey) on CodePen.

Добавьте комментарий в строку CSS файла к свойству float: left. Просмотрите как изменится верстка страницы. Замените float: left на float:right.

«Схлопывание» родительского элемента при всплытии «дочерних»

Пусть внутрь элемента one помещен элемент two. По-умолчанию, высота one растянется по содержимому. Как только мы к элементу two применим свойство float, он всплывает, и родительский элемент one не будет знать что two существует. Если содержимого у two нет, то его высота равна нулю. Такое поведение называется «схлопыванием». Чтобы предотвратить схлопывание родителя ему задают либо свойство min-height — минимальная высота, либо применяют способ: добавляют еще однин блок, для которого задают свойство:

1
<div style="clear:both"></div>

Данный блок не виден на странице, но свойство clear:both снимает обтекание элементов и растягивает родителя на высоту содержимого.

Снимите комментарий свойству float:left в CSS. Посмотрите как ведет себя родительский элемент:

See the Pen float by Alex (@Asmodey) on CodePen.

Рассмотрите пример с применением clear: both

See the Pen float: clear both by Alex (@Asmodey) on CodePen.

Итак вы ознакомились с основными свойстами float. Давайте применим знания на практике.

Выполнить

Задание 1. Добавьте изображениям классы. В классах укажите свойство float:left. Изучите как изменится вывод страницы.

See the Pen float zadanie by Alex (@Asmodey) on CodePen.

Выровняйте изображения поочередно по левому и по правому краю.

Задание 2. Используя свойство float сделайте три блока идущие в один ряд (три колонки).

See the Pen zadanie float by Alex (@Asmodey) on CodePen.

Обратите внимание, что при выстраивании блоков в ряд, родительский элемент «схлопывается». Предотвратите «схлопывание» используя clear:both.


Задание 3. На основе предыдущего примера постройте сетку блоков:

See the Pen XbqGbp by Alex (@Asmodey) on CodePen.


Задание 4. Выполните верстку сайта состоящую из блочных элементов:

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *