CSS Float в теории и на практике
Концепция float возможно одна из самых не интуитивных концепций в CSS, ее непонимание часто приводит к искажению страницы, проблемам с читабельностью и юзабилити. Тем не менее, причина этого не в самой теории, а в том, как ее интерпретируют разработчики браузеров.
Понятие потока
В HTML вывод(отображение) элементов на странице происходит сверху вниз согласно схеме документа. Блок, размещенный в самом верху кода, отобразится выше блока, который расположен в коде ниже. Такая логика позволяет легко прогнозировать результат вывода элементов и управлять им. Порядок вывода объектов на странице и называется «потоком». При этом существует несколько возможностей «вынуть» элемент из потока.
Принцип работы Float
Как и позиционирование, float используется для того, чтобы двигать боксы. Но в отличие от позиционирования, которым можно двигать боксы практически произвольно, все, что может float — это сдвинуть элемент к одной из сторон потока, правой или левой.
При этом сам блок и следующие за ним в потоке приобретают интересное поведение:
- Float'нутый блок смещается по горизонтали и прилипает к одной из сторон родителя.
- Float'нутый блок перестает раздаваться на всю ширину родительского блокаконтейнера (как это происходит с блоками в потоке). С его неприжатой к родителю свободной стороны появляется свободное место.
- Следующие за ним элементы подтягиваются вверх и занимают его место, как если бы float'нутого блока в потоке не было.
- Строчные же элементы внутри, следующего за float'нутым, блока начинают обтекать float'нутый блок со свободной стороны.
сама коробка блока, следующего за float'ом, подлезает под него и занимают всю ширину потока, а вот текст внутри этого блока смещается в сторону и обтекает float'нутый блок, именно поэтому отступ между float'нутым блоком и текстом нужно задавать именно на float'нутом блоке.
Что нужно знать о float:
Элемент с установленным свойством float позиционируется вне основного потока и смещается влево или вправо насколько это возможно. Содержимое страницы обтекает такие элементы. Если элемент вынесен из основного потока, то содержимое основного потока полностью его игнорирует и не оставляет для него места.
Элементы с установленным свойством float автоматически становятся блочными, потом этот блок смещает влево или вправо. Свойство float может принимать значения
right,leftиnone.Во-первых, для плавающих блоков должна быть задана ширина, неважно явным или косвенным образом, иначе он заполнит родительский блок, как и обычные не плавающие блоки, не оставив места для обтекания остальным контентом. Во-вторых, в отличие от элементов в основном потоке, вертикальные границы плавающих блоков не объединяются с границами прилежащих блоков и float'нутый блок можно вытащить за пределы родителя отрицательными
margin'ами. И последнее, плавающий блок может перекрывать элементы, смежные с ним в нормальном потоке.
ImageНельзя создать плавающий в центре элемент. Свойства
float:centerнет!Когда мы устанавливаем для элемента float, он смещаются к правой или левой границе родительского блока, если установить float в том же направлении, для еще одного элемента он будет смещаться к границе предыдущего плавающего элемента, когда элементам перестанет хватать ширины контейнера, они будут перемещаться вниз(переходить на новую строку).
Плавающий блок позиционируется по вертикали так же, как если бы он был в нормальном потоке, его верхняя граница, выравнивается с верхней границей текущей строки, по горизонтали он смещается к правой или левой границе контейнера настолько, насколько это позволяют отступы контейнера. Остальной контент обтекает его с противоположной стороны.
Поскольку плавающие блоки находятся вне основного потока, блоки возле него располагаются, как будто его нет, но строки в них становятся короче, чтобы освободить место для плавающего блока.
Если на текущей строке плавающему блоку не хватает горизонтального пространства, он смещается на одну строку, пока места не станет достаточно.
- Плавающий элемент никогда не поднимается выше строки, в которой создан, его верхняя граница выравнивается с верхней границей этой строки (или с нижней границей предыдущего блочного элемента, если нет соответствующей строки).
- Клиринг
Элементы, следующие за плавающим элементом, будут обтекать его, если вы не хотите этого, нужно применить к ним свойство clear. Свойство clear может принимать четыре значения
left, right, both, none. Существуют различные техники клиринга плавающих элементов без дополнительной разметки. Во-первых, использовать overflow:hidden для родительского элемента. Во-вторых, генерировать контент с помощью псевдо класса :after. - Распространенная проблема с разметками, основанными на плавающих элементах, состоит в том, что родительский элемент не растягивается по вертикали, чтобы полностью поглотить плавающие элементы, это серьезная проблема, если вы хотите добавить бордер к такому элементу или задать для него фон. Одно из решений этой проблемы заключается в использовании overflow
///
Сегодня для решения многих задач которые раньше частично решались float, уже можно решать используя CSS Flexible Box Layout Module(в народе Flexbox)
Уже имеющему довольно хорошую поддержку.
Хорошие объяснения с пирмерами: https://css-tricks.com/snippets/css/a-guide-to-flexbox/
// Ex.
https://codepen.io/MOgorodnik/pen/aLpeVW
//
////
//////