0:00
Здравствуйте!
В этом видео я расскажу вам, что такое плавающие элементы,
и какими свойствами они обладают.
Итак, для того, чтобы создать плавающий элемент,
нужно задать свойство float со значениями left или right.
По умолчанию установлено значение none.
Если установлено значение left или right, то элемент вынимается из потока
и сдвигается влево или вправо соответственно до того,
как коснется либо границы родителя, либо другого элемента с float.
Под фразой «границы родителя» я подразумеваю понятие padding
edge или граница паддинга.
Inline элементы знают о float и обтекают элементы по сторонам.
Также float элементы создают блочный контекст форматирования,
но об этом я расскажу вам в следующем видео.
Ширина float блока определяется по содержимому,
если ему не заданы свойства width или height.
Отступы элементов с float не сливаются,
то есть по аналогии с абсолютно позиционированными элементами.
Рассмотрим пример.
У нас есть два блока-родителя, то есть с классом wrap, и два float элемента.
Эти два float элемента находятся в первом элементе wrap.
Один со свойством float: left, а другой со свойством float: right.
И между ними находится большой кусок текста.
Во втором блоке находится только лишь текст.
В браузере это выглядит вот так.
То есть float: left элемент сдвинулся влево до достижения так
называемого padding edge или границы паддинга, но остался в той же строке.
float: right элемент сдвинулся вправо,
пока не уперся в padding edge, но остался в той же строке.
Еще важно заметить, что float элементы пронизывают блочные элементы,
то есть блочные элементы на них никак не реагируют.
Также float: right элемент видно,
что очень сильно наползает на тот элемент, который находится рядом.
Но текст, находящийся внутри этого элемента, обтекает float блоки.
Рассмотрим еще один пример.
Итак, у нас есть float: left элемент, затем идет элемент wrap,
затем идет float: right элемент и снова элемент wrap.
В элементах wrap находится какое-то количество текста.
Посмотрим, что же получилось в браузере.
Итак, мы видим: float: left элемент остался на той же строке,
но так как элемент wrap является блочным,
то он игнорирует float: left элемент и заполз под него.
И аналогично с float: right элементом, под него заполз второй элемент wrap.
Но так как внутри находится текст, а это inline элементы,
то они обтекают синие блоки.
Одним из свойств float элементов является то, что отступы не схлапываются.
Вот например, у нас есть блок номер 1 и блок номер 2,
у них у обоих заданы марджины 20 пикселей.
И между ними в сумме марджины получаются 40 пикселей.
То есть это не обычные элементы, у которых марджины схлапываются.
Что будет, если у нас находится три float: left элемента?
Куда же встанет четвертый элемент?
Если справа будет место, то он встанет за ними.
Если справа места будет не хватать, то он будет опускаться вниз до тех пор,
пока ему не станет хватать места.
В данном случае он встал под третий блок.
Если мы увеличим размер второго блока, то ничего не изменится,
и четвертый элемент встанет под третий блок, поскольку ему там достаточно места.
Если у нас второй блок по высоте меньше третьего,
то float: left элемент будет влево двигаться до тех пор,
пока не упрется либо во float элемент, либо в границы родителя.
То есть он в этом случае встанет под первый элемент.
Если мы уменьшим размер первого элемента,
то четвертый элемент встанет не ровно под первый элемент,
а он встанет по высоте под третий элемент, но находиться будет под первым элементом.
Свойство clear позволяет элементам реагировать на float элементы.
У него есть три значения: left, right или both.
Соответственно, clear: left реагирует на float: left элементы,
clear: right — на float: right элементы, и значение both указывает на то,
что нужно реагировать на элементы left и right.
Посмотрим, как это работает.
Вот у нас по-прежнему есть wrapper 1, wrapper 2.
И во wrapper 1 лежат два float элемента: float: left и float: right.
Зададим этим двум блокам свойство clear: left.
И что мы увидим?
Что wrapper 2 начинает реагировать на float: left элементы, находящиеся вне его.
То есть если float элемент находится внутри какого-то блока,
у которого установлено свойство clear: left, то ничего не произойдет.
А элементы, которые находятся вне, начинают на него реагировать.
Второй пример.
Мы зададим wrapper 2 и wrapper 1 свойство clear: right.
В этом случае он начинает реагировать только на float: right элементы.
Ну и по аналогии с предыдущим примером wrapper 1 также не
реагирует на float элементы, потому что они находятся внутри него.
Ну и свойство clear: both мы указываем обоим врапперам,
и видим, что wrapper 2 смещается вниз до тех пор,
пока не перестает пересекать float: left элемент.
В этом видео вы узнали, что такое float элементы,
и как реагируют на них окружающие блоки.
В следующем видео я расскажу вам о том, что такое блочный контекст форматирования,
и как сделать так, чтобы блочные элементы реагировали на float элементы.
Олег Семичевразработчик интерфейсов, Яндекс
Артем Кувалдинразработчик интерфейсов, Яндекс
Мохов Олегразработчик интерфейсов, Яндекс
