CSS-drijvers verklaard door op een roltrap te rijden

Als je ooit op een roltrap bent gesprongen, kun je snel floats begrijpen.

Je

is bijna perfect. U besluit enkele praalwagens te introduceren om de relatie tussen enkele elementen te herstellen.

Het volgende dat je weet, je nieuw zwevende elementen springen uit je zorgvuldig gekozen volgorde en blijven als een magneet aan de zijkant van je div. De uitdrukking "onbedoeld gedrag" komt te binnen.

Ik heb persoonlijk uren besteed aan het proberen om drijvers volledig te begrijpen. Ik zou een artikel lezen en zeggen: "Oh, dit is logisch!" Dan zou ik terugkeren naar mijn code, het uitproberen en ... falen. Terug naar de tekentafel.

Ik ga mijn best doen om je dit lot te besparen.

Floats creëren alternatieve stromen. Dit is het moeilijkste om te begrijpen. En zodra u ze introduceert, moet u uw code zo schrijven dat deze tot drie stromen goed is: normaal, links en rechts. Dit is een geheel nieuw stel regels, in tegenstelling tot het manipuleren van de breedte van elementen of hun positionering.

Floats zijn eigenlijk vrij gelijkaardig aan de dynamiek van het rijden op een roltrap, en ik ga laten zien hoe ze naast de duidelijke eigenschap kunnen worden gebruikt om kristalheldere relaties binnen divs te creëren. Op deze manier zul je de volgende keer dat je floats in je code probeert te gebruiken, niet voor verrassingen komen te staan.

Ik moet de rijbaan respecteren

De standaardstroom van elementen lijkt op de bovenstaande afbeelding. Er staat een man in het midden met zijn hand op de reling. Hij pakt de hele roltrap. Niemand kan hem passeren. Vrij arme roltrap etiquette, echt waar.

Hij staat achter een groep andere mensen die hetzelfde doen, dus niemand kan hen ook passeren. Er is geen concept van rijstroken of elementair menselijk fatsoen.

Dit is het scenario wanneer u helemaal geen floats gebruikt.

Oké, nu hebben we het! Mensen die een zekere mate van bewustzijn tonen. Ik ben dol dat te zien.

We hebben één rijstrook links en een andere rijstrook rechts. Andere mensen kunnen zich gemakkelijk rond de twee stilstaande mensen verplaatsen en sneller de roltrap oplopen, als ze dat willen. Niemand blokkeert de stroom door in het midden te staan.

Dit is het scenario wanneer u floats in uw div gebruikt. Er is een linker stroom en een rechter stroom, en de elementen die niet zweven, kunnen gemakkelijk de ruimte vullen die niet wordt ingenomen door de zwevende elementen.

Floats: links en rechts

Het gebruik van drijvers kan tot twee nieuwe stromen introduceren: links en rechts.

En hierdoor kan de normale stroom van elementen, die zonder een float-waarde, de ruimtes rondom deze elementen invullen.

Met drijvers kunt u deze nieuwe relaties tussen stromen maken.

Als je één rij mensen in het midden van de lift had staan, had je beperkte opties voor nieuwe structuren. Maar als je een linker- en rechterkolom hebt, kun je plotseling opgeven dat bepaalde mensen aan de rechterkant staan, andere links blijven en een andere groep de gaten kan invullen.

Hiermee kunt u meer leesbare en begrijpelijke code maken, omdat de eigenschap float ook een indicatie geeft van de relatie van een element met omliggende elementen.

De duidelijke eigenschap

Er is nog een rimpel die we nog niet hebben besproken: de duidelijke eigenschap. Met "Wissen" kunnen elementen opgeven waar ze moeten worden uitgelijnd in vergelijking met de zwevende elementen.

Op de eerste foto van het gedeelte 'Floats' stonden de twee roltraprijders hoffelijk aan elke kant van de roltrap. Hierdoor kunnen anderen hen passeren en vrij bewegen zoals zij dat willen.

Laten we zeggen dat in plaats van één zwevend linkerelement en één zwevend rechterelement, we in plaats daarvan drie zwevende linkerelementen en 1 aan de rechterkant hadden. De drie zwevende linkerelementen zouden in een lijn aan de linkerkant worden gestapeld als we ze ook de eigenschap 'clear: left' geven. Maar als ze horizontaal zijn uitgelijnd met het zwevende juiste element, kan het voor de normale stroom van elementen heel moeilijk of zelfs onmogelijk zijn om te passeren:

"Wissen: links" vertelt elke persoon die naar links drijft dat ze zich moeten richten achter het eerste element dat naar links drijft. Afhankelijk van de grootte van de onderste twee personen, kan het een uitdaging zijn om normale elementen erdoorheen te drukken en de ruimte rechtsboven in te nemen. Dus zelfs goede roltrappraktijken kunnen nog steeds tot blokkades leiden.

Een van de meest voorkomende toepassingen van de clear property is "clear: both". Hiermee kunt u de stroom van elementen resetten, in tegenstelling tot het blijven handhaven van een stroom rechts, links en normaal. Het is een beetje zoals die kerel op de roltrap die de hele ruimte in beslag neemt omdat hij zijn koffer had meegenomen.

Met "duidelijk: beide" maakt het niet uit waar die ene man zich in zijn koffer bevindt. Het maakt niet uit wie links of rechts boven hem staat. Hij blokkeert nog steeds de hele roltrap. Mensen die na hem opschieten, moeten een nieuwe stroom elementen beginnen, die elk van de drie stromen kan omvatten: links, rechts of normaal.

Hij is ontsnapt aan het driestroomsysteem en heeft de regels gereset. Slecht voor mensen die de roltrap op willen rennen? Zeker. Maar het is goed als je wilt voorkomen dat iemand passeert.

Merk op hoe dit anders is dan die ene heer in het begin die midden in de roltrap stond, achter een rij mensen die hetzelfde deden. Dat was een systeem met één stroom. "Clear: both" erkent dat er maximaal drie stromen kunnen zijn en blokkeert de doorgang van elk element dat volgt.

Als je dit bericht leuk vond, vind je misschien ook mijn andere uitleg over uitdagende CSS- en JavaScript-onderwerpen, zoals positionering, Model-View-Controller en callbacks, leuk.

En als je denkt dat dit andere mensen in dezelfde positie als jij zou kunnen helpen, geef het dan een "hart"!

Dit bericht verscheen oorspronkelijk op de CodeAnalogies-blog.