CSS Float объяснил, ехать на эскалаторе

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

Ваш

почти идеален. Вы решили ввести несколько поплавков, чтобы исправить отношения между несколькими элементами.

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

Я лично часами пытался полностью понять поплавки. Я прочитал статью и сказал: «О, это имеет смысл!» Затем я вернусь к своему коду, попробую его и… потерплю неудачу. Вернуться к доске для рисования.

Я сделаю все возможное, чтобы избавить вас от этой участи.

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

На самом деле, поплавки очень похожи на динамику езды на эскалаторе, и я собираюсь показать, как их можно использовать вместе со свойством clear для создания кристально чистых отношений внутри div. Таким образом, в следующий раз, когда вы попытаетесь использовать float в своем коде, вы не столкнетесь с какими-либо сюрпризами.

Должен уважать переулок

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

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

Это сценарий, когда вы вообще не используете поплавки.

Хорошо, теперь мы говорим! Люди, показывающие некоторый уровень осведомленности. Мне нравится видеть это.

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

Это сценарий, когда вы используете поплавки в вашем div. Существует левый поток и правый поток, и не всплывающие элементы могут легко заполнить пространство, которое не занято всплывающими элементами.

Поплавки: левый и правый

Использование поплавков может ввести до двух новых потоков: левый и правый.

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

Поплавки позволяют создавать эти новые отношения между потоками.

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

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

Чистая собственность

Есть еще одна морщина, которую мы еще не обсуждали: свойство clear. «Очистить» позволяет элементам указывать, где они должны быть выровнены по сравнению с плавающими элементами.

На первом изображении секции «Поплавки» два наездника эскалатора вежливо стояли по бокам эскалатора. Это позволяет другим проходить мимо них и свободно перемещаться по своему желанию.

Допустим, вместо одного плавающего левого элемента и одного плавающего правого элемента у нас вместо этого было 3 плавающих левых элемента и 1 справа. Три плавающих левых элемента будут складываться в строку слева, если мы также дадим им свойство «clear: left». Но если они выровнены по горизонтали с плавающим правым элементом, это может затруднить или даже сделать невозможным прохождение нормального потока элементов:

«Очистить: слева» говорит каждому человеку, плавающему влево, что он должен выровняться за первым элементом, плавающим слева. В зависимости от размера двух нижних людей, нормальным элементам может быть сложно протиснуться и занять место в правом верхнем углу. Таким образом, даже хорошая практика эскалатора все еще может привести к блокированию.

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

С «clear: both» не имеет значения, где этот парень стоит в ориентации к своему чемодану. Неважно, кто стоит слева или справа над ним. Он все еще блокирует весь эскалатор. Людям, которые идут за ним, нужно будет начать новый поток элементов, который может включать любой из трех потоков: левый, правый или нормальный.

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

Обратите внимание, как это отличается от одного джентльмена в начале, который стоял посреди эскалатора, позади ряда людей, которые делали то же самое. Это была система с одним потоком. «Очистить: оба» признает, что может быть до трех потоков, и блокирует прохождение любого последующего элемента.

Если вам понравился этот пост, вам также могут понравиться мои другие объяснения сложных тем CSS и JavaScript, таких как позиционирование, Model-View-Controller и обратные вызовы.

И если вы думаете, что это может помочь другим людям в том же положении, что и вы, дайте ему «сердце»!

Этот пост первоначально появился в блоге CodeAnalogies.