CSS Float begrijpen

De CSS-eigenschap is een zeer belangrijke eigenschap voor lay-out. Hiermee kunt u de ontwerpen van uw webpagina precies zo plaatsen als u wilt dat ze worden weergegeven, maar om deze te gebruiken, moet u begrijpen hoe het werkt.

In een stylesheet ziet de CSS float-eigenschap er als volgt uit:

.recht {float: right; }

Dit vertelt de browser dat alles met de klasse van "rechts" naar rechts moet worden verplaatst.

Je zou het als volgt toewijzen:

class = "right" />

Wat kunt u zweven met de CSS float-eigenschap?

Je kunt niet elk element op een webpagina zwevend maken. Je kunt alleen elementen op blokniveau drijven. Dit zijn de elementen die een blok ruimte op de pagina innemen, zoals afbeeldingen (), alinea's (), divisies () en lijsten ().

Andere elementen die van invloed zijn op tekst, maar geen vak op de pagina maken, worden inline elementen genoemd en kunnen niet worden weergegeven. Dit zijn elementen zoals span (), regeleinden (), sterke nadruk () of cursief ().

Waar drijven ze?

Je kunt elementen naar rechts of links zweven. Elk element dat het drijvende element volgt, zal rond het drijvende element aan de andere kant stromen.

Als ik bijvoorbeeld een afbeelding naar links zweef, vloeit de tekst of andere elementen die erop volgen naar de afbeelding naar rechts. En als ik een afbeelding naar rechts zweef, vloeit de tekst of andere elementen ernaast eromheen naar links. Een afbeelding die in een tekstblok wordt geplaatst zonder dat er een floatstijl op wordt toegepast, wordt weergegeven maar de browser is ingesteld om afbeeldingen weer te geven. Meestal wordt de eerste regel van de volgende tekst onder aan de afbeelding weergegeven.

Hoe ver zullen ze zweven?

Een element dat is gedreven, zal zo ver mogelijk naar links of rechts van het containerelement bewegen. Dit resulteert in verschillende situaties afhankelijk van hoe uw code is geschreven. Voor deze voorbeelden zal ik een beetje zweven DIV element aan de linkerkant:

• Als het drijvende element geen vooraf gedefinieerde breedte heeft, neemt het zoveel horizontale ruimte in als nodig en beschikbaar, ongeacht de drijver. Opmerking: sommige browsers proberen elementen naast zwevende elementen te plaatsen wanneer de breedte niet is gedefinieerd, waardoor het niet-zwevende element slechts een kleine hoeveelheid ruimte krijgt. Dat zou je dus moeten doen definieer altijd een breedte op gedreven elementen.
• Als het containerelement het HTML-element is, is het drijvend DIV zit in de linkermarge van de pagina.
• Als het containerelement zelf wordt ingepakt door iets anders, zweeft het DIV zal op de linkermarge van de container zitten.
• Je kunt drijvende elementen nesten en dat kan ertoe leiden dat de dobber op een verrassende plaats terechtkomt. Deze drijver is bijvoorbeeld links gedreven DIV binnen een rechts gedreven DIV.
• Zwevende elementen zullen naast elkaar zitten als er ruimte in de container is. Deze container heeft bijvoorbeeld drie 100px breed DIV elementen dreef in een 400px brede container.

U kunt zelfs vlotters gebruiken om een ​​lay-out met een fotogalerij te maken. Je zet elke thumbnail (het werkt het best als ze allemaal dezelfde grootte hebben) in a DIV met het bijschrift en het zweven van de DIV elementen in de container. Hoe breed het browservenster ook is, de miniaturen worden uniform uitgelijnd.

De vlotter uitschakelen

Zodra je weet hoe je een element kunt laten zweven, is het belangrijk om te weten hoe je de vlotter uitzet. U schakelt de float uit met de CSS-clear-eigenschap. Je kunt linker drijvers, rechter drijvers of beide wissen:

vrij: links;duidelijk: goed;beiden opschonen;

Elk element waarvoor u de vrije eigenschap instelt, verschijnt onder een element dat in die richting zweeft. In dit voorbeeld zijn de eerste twee alinea's van tekst bijvoorbeeld niet gewist, maar de derde is.

Speel met de duidelijke waarde van verschillende elementen in uw documenten om verschillende lay-outeffecten te krijgen. Een van de meest interessante zwevende lay-outs is een reeks afbeeldingen in de kolom rechts of links naast alinea's van de tekst. Zelfs als de tekst niet lang genoeg is om langs de afbeelding te scrollen, kunt u het wissen van alle afbeeldingen gebruiken om ervoor te zorgen dat ze in de kolom worden weergegeven in plaats van naast de vorige afbeelding.

De HTML (herhaal deze alinea):

Duis aute irure dolor sed do eiusmod tempor incididunt in reprehenderit in voluptate. Cupidatat non proident, ut labore et dolore magna aliqua.

De CSS (om de afbeeldingen naar links te zweven):

img.float {float: left; clear: left; margin: 5px;}

En aan de rechterkant:

img.float {float: right; clear: right; margin: 5px;}

Drijft gebruiken voor lay-out

Als je eenmaal begrijpt hoe het vlotter property werkt, kunt u het gebruiken om uw webpagina's in te delen. Dit zijn de stappen die ik neem om een ​​geopende webpagina te maken:

• Ontwerp de lay-out (op papier of in een grafische tool of in mijn hoofd).
• Bepaal waar de paginadivisies zullen zijn.
• Bepaal de breedtes van de verschillende containers en de elementen erin.
• Drijf alles. Zelfs het buitenste containerelement is naar links gedreven, zodat ik weet waar het zich zal bevinden ten opzichte van de browser view-poort.

Zolang u weet dat de breedten (percentages zijn prima) van uw layoutsecties, kunt u de vlotter eigendom om ze te plaatsen waar ze thuishoren op de pagina. En het leuke is dat u zich minder zorgen hoeft te maken dat het doosmodel anders is voor Internet Explorer of Firefox.