Zweven - CSS-trucs

De floateigenschap in CSS wordt gebruikt voor positionering en lay-out op webpagina's.

.module ( float: left; )

Waarden

• none: het element zweeft niet. Dit is de beginwaarde.
• left: laat het element links van de container zweven.
• right: laat het element rechts van zijn container zweven.
• inherit: het element erft de zweefrichting van zijn ouder.

Opmerking: een element dat zweeft, wordt automatisch uitgevoerd display: block;

Wat betekent float?

Om het doel en de oorsprong ervan te begrijpen float, kunnen we kijken naar printontwerp. In een afdruklay-out kunnen afbeeldingen zo op de pagina worden geplaatst dat de tekst er indien nodig omheen loopt. Dit wordt gewoonlijk en toepasselijk "tekstomloop" genoemd. Hier is een voorbeeld van.

In programma's voor paginaopmaak kunnen de vakken die de tekst bevatten, worden verteld dat ze de tekstomloop respecteren of negeren. Als u de tekstomloop negeert, kunnen de woorden over de afbeelding stromen alsof deze er niet eens was. Dit is het verschil tussen die afbeelding die deel uitmaakt van de stroom van de pagina (of niet). Webdesign lijkt erg op elkaar.

In webdesign zijn pagina-elementen waarop de CSS- floateigenschap is toegepast, net als de afbeeldingen in de afdruklay-out waar de tekst omheen loopt. Zwevende elementen blijven een onderdeel van de stroom van de webpagina. Dit is duidelijk anders dan pagina-elementen die absolute positionering gebruiken. Absoluut gepositioneerde pagina-elementen worden verwijderd uit de stroom van de webpagina, zoals wanneer het tekstvak in de afdruklay-out werd verteld om de paginaomslag te negeren. Absoluut gepositioneerde pagina-elementen hebben geen invloed op de positie van andere elementen, en andere elementen hebben geen invloed op hen, of ze elkaar nu raken of niet.

Demo

Deze demo toont een artikel met twee afbeeldingen: één ingesteld op float: leften één ingesteld op float: right. Druk op de "toggle floats" -knop om de floats uit en aan te zetten.

Zie het Pen Float-voorbeeld door CSS-Tricks (@ css-tricks) op CodePen.

Drijft voor lay-out

Afgezien van het eenvoudige voorbeeld van het omwikkelen van tekst rond afbeeldingen, kunnen drijvers worden gebruikt om volledige weblay-outs te maken .

Vlotters zijn ook handig voor lay-out in kleinere gevallen. Neem bijvoorbeeld dit kleine gedeelte van een webpagina. Als we floatvoor onze avatarafbeelding gebruiken, wordt de tekst in het vak opnieuw geplaatst wanneer die afbeelding van formaat verandert om eraan te voldoen:

Dezelfde lay-out zou kunnen worden bereikt door relatieve positionering op de container en ook absolute positionering op de avatar. Maar als het op die manier wordt gedaan, wordt de tekst niet beïnvloed door de avatar en kan deze niet opnieuw worden geplaatst bij een verandering van grootte.

Demo

Deze demo toont een avatar met float: lefttoegepast. Druk op de knop "afbeeldingsgrootte wisselen" om een ​​bredere versie van de avatarafbeelding te zien. Merk op dat de tekst opnieuw wordt geplaatst om de afbeelding te passen in plaats van over de afbeelding heen te lopen.

Zie de Pen Float Demo door CSS-Tricks (@ css-tricks) op CodePen.

De vlotter wissen

Het zusterbezit van Float is clear. Een element met de cleareigenschap erop zal niet naast de vlotter omhoog bewegen zoals de vlotter wenst, maar zal zichzelf langs de vlotter naar beneden bewegen. Nogmaals, een illustratie is nuttiger dan woorden:

In het bovenstaande voorbeeld is de zijbalk naar rechts zwevend en korter dan het hoofdinhoudsgebied. De voettekst is dan nodig om omhoog te springen in die beschikbare ruimte zoals vereist door de vlotter. Om dit probleem op te lossen, kan de voettekst worden gewist om ervoor te zorgen dat deze onder beide zwevende kolommen blijft.

#footer ( clear: both; )

Clear heeft ook vier geldige waarden. De waarde bothwordt het meest gebruikt, waardoor drijvers uit beide richtingen worden gewist. De waarden leften rightkunnen worden gebruikt om de vlotter alleen uit één richting te wissen. De initiële waarde is none, die meestal niet nodig is, tenzij deze wordt gebruikt om expliciet een clearwaarde te verwijderen die is ingesteld. De waarde inheritzorgt ervoor dat het element de clearwaarde van zijn ouder erven . Vreemd genoeg ondersteunde Internet Explorer deze waarde pas in IE8.

Alleen het leftof rightdrijven opruimen , hoewel dit minder vaak in het wild wordt gezien, heeft zeker zijn nut.

The Great Collapse

Een van de meest verbijsterende dingen over het werken met drijvers is hoe ze het element kunnen beïnvloeden dat ze bevat (hun "ouder" -element). Als een bovenliggend element alleen zwevende elementen bevat, stort de hoogte in tot niets. Dit is niet altijd duidelijk als de ouder geen visueel opvallende achtergrond heeft, maar het is belangrijk om hiervan op de hoogte te zijn.

Hoe contra-intuïtief ineenstorten ook mag lijken, het alternatief is erger. Overweeg dit scenario:

Als het blokelement bovenaan automatisch zou zijn uitgezet om het zwevende element te accommoderen, zouden we een onnatuurlijke spatiëring hebben in de tekststroom tussen alinea's, zonder dat dit praktisch kan worden opgelost. Als dit het geval zou zijn, zouden wij ontwerpers veel harder klagen over dit gedrag dan over instorten.

Instorten moet bijna altijd worden aangepakt om vreemde lay-out en browseroverschrijdende problemen te voorkomen. We repareren het door de vlotter leeg te maken na de drijvende elementen in de container maar voor het sluiten van de container.

Technieken voor het wissen van praalwagens

Als u zich in een situatie bevindt waarin u altijd weet wat het volgende element zal zijn, kunt u de clear: both;waarde op dat element toepassen en uw zaken doen. Dit is ideaal omdat het geen dure hacks en geen extra elementen vereist, waardoor het perfect semantisch is. Natuurlijk loopt het meestal niet zo en we hebben meer tools voor het opruimen van vlotters in onze gereedschapskist nodig.

• De Empty Div-methode is, vrij letterlijk, een lege div.​ Soms zie je een
element of een ander willekeurig element dat wordt gebruikt, maar div is de meest voorkomende omdat het geen standaardstijl van de browser heeft, geen speciale functie heeft en het onwaarschijnlijk is dat het generiek wordt opgemaakt met CSS. Deze methode wordt geminacht door semantische puristen omdat het geen contextuele betekenis heeft voor de pagina en er puur voor presentatie is. Natuurlijk hebben ze in de meest strikte zin gelijk. Maar het klaart de klus en doet niemand pijn.
• De Overflow-methode is gebaseerd op het instellen van de overflowCSS-eigenschap op een bovenliggend element. Als deze eigenschap is ingesteld op autoof hiddenop het bovenliggende element, wordt de ouder uitgevouwen om de drijvers te bevatten, waardoor deze effectief wordt gewist voor volgende elementen. Deze methode kan prachtig semantisch zijn omdat er misschien geen extra elementen voor nodig zijn. Als je echter merkt dat je alleen een nieuwe toevoegt divom dit toe te passen, is het even on-semantisch als de lege divmethode en minder aanpasbaar. Houd er ook rekening mee dat de overflow-eigenschap niet specifiek bedoeld is voor het opruimen van vlotters. Pas op dat u de inhoud niet verbergt of ongewenste schuifbalken activeert.
• De Easy Clearing-methode (ook wel bekend als "clearfix") gebruikt een slimme CSS-pseudo-selector ( :after) om drijvers te wissen. In plaats van de overflow op de ouder in te stellen, past u er een extra klasse zoals "clearfix" op toe. Pas dan deze CSS toe:

  .clearfix:after ( content: ""; visibility: hidden; display: block; height: 0; clear: both; )

  Dit zal een klein beetje inhoud toepassen, verborgen aan het zicht, na het bovenliggende element dat de zwevende positie wist. Dit is niet helemaal het hele verhaal, aangezien er extra code moet worden gebruikt voor oudere browsers. Opmerking: zie ook dit fragment dat de nieuwste en beste op het gebied van clearfixes bijhoudt, inclusief de nieuwere "micro clearfix".

Verschillende scenario's vragen om verschillende float-verrekeningsmethoden. Neem bijvoorbeeld een raster van blokken, elk van verschillende typen.

Om de vergelijkbare blokken visueel beter met elkaar te verbinden, willen we een nieuwe rij beginnen zoals we willen, in dit geval wanneer de kleur verandert. We zouden de overflow- of easy-clearing-methode kunnen gebruiken als elk van de kleurgroepen een ouderelement had. Of we gebruiken de lege div-methode tussen elke groep. Drie wrapping divs die voorheen niet bestonden of drie na divs die voorheen niet bestonden. Ik zal je laten beslissen wat beter is.

Problemen met Floats

Vlotters worden vaak verslagen omdat ze kwetsbaar zijn. Het grootste deel van deze kwetsbaarheid werd veroorzaakt door bugs in IE6 en IE7. Terwijl die browsers in het verleden vervagen, vervagen deze bugs samen met hen. Maar het is nog steeds de moeite waard om ze te begrijpen als u ooit een "OldIE" moet debuggen.

• Pushdown is een symptoom van een element in een drijvend item dat breder is dan de drijver zelf (meestal een afbeelding). De meeste browsers geven de afbeelding buiten de zwevende weergave weer, maar het uitstekende gedeelte heeft geen invloed op de andere lay-out. Oude versies van IE breidden de float uit om de afbeelding te bevatten, wat vaak de lay-out drastisch beïnvloedde. Een bekend voorbeeld is een afbeelding die uit de hoofdinhoud steekt en de zijbalk naar beneden duwt.
  

  

  Snelle oplossing: zorg ervoor dat u geen afbeeldingen heeft die dit doen, gebruik overflow: hidden;om overtollig materiaal af te snijden.

• Double Margin Bug - Een ander ding om te onthouden bij het omgaan met IE 6 is dat als u een marge toepast in dezelfde richting als de float, dit de marge verdubbelt. Snelle oplossing: zet display: inlineop de vlotter, en maak je geen zorgen, het blijft een element op blokniveau.
• De 3px Jog is wanneer tekst die naast een zwevend element staat, op mysterieuze wijze met 3 px wordt weggeschopt als een raar krachtveld rond de vlotter. Snelle oplossing: stel een breedte of hoogte in voor de betreffende tekst.
• In IE 7 was de Bottom Margin Bug wanneer als een zwevende ouder kinderen erin heeft laten zweven, de onderste marge op die kinderen wordt genegeerd door de ouder. Snelle oplossing: in plaats daarvan een onderste opvulling op de ouder gebruiken.

Alternatieven

Als u tekstomloop rond afbeeldingen nodig heeft, zijn er echt geen alternatieven voor zweven. Nu we het er toch over hebben, bekijk deze nogal slimme techniek om tekst rond onregelmatige vormen te laten lopen. Maar voor de pagina-indeling zijn er zeker keuzes. Eric Sol heeft een artikel over A List Apart, Faux Absolute Positioning, waarin een zeer interessante techniek wordt beschreven die in veel opzichten de flexibiliteit van drijvers combineert met de kracht van absolute positionering.

CSS3 pakt de pagina-indeling op een aantal manieren aan:

• Flexbox
• Lay-out met meerdere kolommen
• Rasterlay-out

Absoluut gepositioneerde drijvers (je positioneert bijvoorbeeld absoluut zoals normaal, maar het element kan nog steeds andere elementen beïnvloeden, zoals tekst eromheen laten lopen) werden besproken, maar ik denk dat het idee op de plank lag vanwege overeenkomsten met andere, meer robuuste lay-outideeën.

Video

Ik heb een tijdje geleden een screencast gemaakt waarin ik veel van deze float-concepten uitlegde.

Verwant

• clear
• position

Meer informatie

• float in de W3C-specificatie
• float bij MDN

Browser-ondersteuning

Chrome	Safari	Firefox	Opera	D.W.Z	Android	iOS
Alle	Alle	Alle	Alle	Alle	Alle	Alle