CSS плава обяснено с езда на ескалатор

Ако някога сте скачали на ескалатор, тогава можете бързо да разберете поплавките.

Вашият

е почти перфектен. Вие решавате да въведете няколко поплавъка, за да фиксирате връзката между няколко елемента.

Следващото нещо, което знаете, вашите новоплаващи елементи изскачат от внимателно подбраната ви поръчка и се придържат отстрани на вашия div като магнит. Изразът „неволно поведение” идва на ум.

Аз лично съм прекарвал часове в опит да разбера напълно плаващите. Прочетох статия и казах: „О, това има смисъл!“ След това се връщам към кода си, изпробвайте го и… не успявам. Обратно към дъската за рисуване.

Ще направя всичко възможно да ви пощадя тази съдба.

Поплавките създават алтернативни потоци. Това е най-трудната за разбиране част. И след като ги въведете, тогава трябва да напишете кода си, така че да отчита до три потока: нормален, ляв и десен. Това е съвсем нов набор от правила, за разлика от манипулирането на ширината на елементите или тяхното позициониране.

Всъщност поплавките доста приличат на динамиката на каране на ескалатор и аз ще покажа как могат да бъдат използвани заедно с ясното свойство за създаване на кристално чисти връзки в divs. По този начин, следващия път, когато се опитате да използвате плаващи в кода, няма да срещнете изненади.

Трябва да спазвам лентата за преминаване

Потокът по подразбиране на елементи е нещо като картината по-горе. Някой човек стои в средата с ръка върху парапета. Закача целия ескалатор. Никой не може да го подмине. Доста лош етикет на ескалатора, наистина.

Той стои зад куп други хора, които правят същото, така че и никой не може да ги подмине. Няма концепция за платна или основна човешка приличност.

Това е сценарият, когато изобщо не използвате плаващи.

Добре, сега говорим! Хората, които показват някакво ниво на информираност. Обичам да виждам това.

Имаме една лента, образувана отляво, и друга лента, образувана отдясно. Други хора могат лесно да се движат около двамата, които стоят неподвижно и да вървят по-бързо по ескалатора, ако искат. Никой не блокира потока, като стои в средата.

Това е сценарият, когато използвате floats във вашия div. Има ляв поток и десен поток и елементите, които не са плаващи, могат лесно да запълнят пространството, което не е заето от плаващите елементи.

Поплавъци: вляво и вдясно

Използването на поплавъци може да въведе до два нови потока: ляво и дясно.

И това позволява нормалният поток от елементи, тези без стойност на поплавък, да попълват пространствата около тези елементи.

Поплавките ви позволяват да създавате тези нови връзки между потоците.

Ако имаше един ред хора, стоящи в средата на асансьора, ще имате ограничени възможности за нови структури. Но когато имате лява и дясна колона, изведнъж можете да определите, че определени хора стоят отдясно, други остават вляво и друга група може да попълни празнините.

Това ви позволява да създадете по-четим и разбираем код, тъй като свойството float също дава индикация за връзката на даден елемент с околните елементи.

Изчистеният имот

Има още една бръчка, която все още не сме обсъждали: ясното свойство. „Clear“ позволява на елементите да определят къде трябва да се подравнят в сравнение с плаващите елементи.

На първата снимка на секцията „Поплавки“ двамата ездачи на ескалатора любезно стояха от всяка страна на ескалатора. Това позволява на другите да ги преминават и да се движат свободно, както желаят.

Нека да кажем, че вместо един плаващ лев елемент и един плаващ десен елемент, вместо него имахме 3 плаващи леви елемента и 1 отдясно. Трите плаващи леви елемента биха се подредили в ред отляво, ако им дадем и свойството „ясно: ляво“. Но ако те са хоризонтално подравнени с плаващия десен елемент, това може да направи много трудно или дори невъзможно нормалният поток от елементи да премине:

„Изчисти: ляво“ казва на всеки плаващ вляво, че трябва да се подравнят зад първия елемент, който е плаващ вляво. В зависимост от размера на долните двама души, може да е предизвикателно всеки нормален елемент да се промъкне и да заеме пространството в горния десен ъгъл. Така че дори добрите ескалаторни практики все още могат да доведат до блокиране.

Едно от най-честите употреби на ясното свойство е „ясно: и двете“. Това ви позволява да нулирате потока от елементи, за разлика от продължаващото поддържане на десен, лев и нормален поток. Това е като този човек на ескалатора, който заема цялото пространство, защото донесе куфара си.

С „ясно: и двете“, няма значение къде този човек стои ориентиран към куфара си. Няма значение кой стои наляво или надясно над него. Той все още блокира целия ескалатор. Хората, които се качват след него, ще трябва да започнат нов поток от елементи, който може да включва всеки от трите потока: ляв, десен или нормален.

Той е избягал от системата с три потока и е нулирал правилата. Лошо за хората, които искат да стартират ескалатора? Сигурен. Но е добре, ако искате да попречите на някой да премине.

Забележете как това е различно от един господин в началото, който стоеше в средата на ескалатора, зад редица хора, които правеха същото. Това беше система с един поток. „Ясно: и двете“ признава, че може да има до три потока, и блокира преминаването на всеки следващ елемент.

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

И ако смятате, че това може да помогне на други хора в същото положение като вас, дайте му „сърце”!

Първоначално тази публикация се появи в блога CodeAnalogies.