CSS Float: beschrijving, eigenschappen

Float is een van de basisfuncties van de CSS- taal (Cascading Style Sheets - de opmaak van cascading tabellen). Deze taal bestaat sinds 1996 en ontwikkelt zich nog steeds. Op dit moment gebruiken ontwikkelaars al de derde versie van CSS. Met behulp van de CSS-programmeertaal is het mogelijk om een volledig mooie en aangename site te maken die niet voor de gebruiker lijkt of ongemakkelijk is, zelfs als u geen JavaScript gebruikt. Moderne eigenschappen van de derde versie staan u toe om dit te doen.

Ontwikkelaars kunnen ook handige opmaakopties gebruiken, zoals Flexbox of Position om de plaats van een element op de site te veranderen, maar over alles in orde. Ten eerste moet u de voor- en nadelen van de Float-eigenschap begrijpen.

CSS Float - waarom is het nodig?

Float is een eigenschap voor positionerende elementen. Iedere dag staat het op de pagina's van kranten en tijdschriften, op zoek naar foto's en tekst, die er heel zorgvuldig omheen draaien. и CSS при использовании функции Float должно произойти то же самое. In de wereld van HTML- en CSS-codes, moet het zelfde ding gebeuren bij gebruik van de Float-functie. Maar het is de moeite waard te herinneren dat het bewerken van afbeeldingen niet altijd het hoofddoel van deze functie is. Het kan gebruikt worden om een populaire lay-out van site-elementen in twee, drie, vier kolommen te maken. In feite is de Float CSS eigenschap toegepast op bijna elk HTML-element. Het kennen van de basis voor het bewerken van de lay-out van elementen met behulp van de functie Float, en dan Property, het creëren van een ontwerp van de site, zal niet moeilijk zijn.

Speciale programma's van lay-out designers kunnen soms beelden overslaan, maar gaan over hen. Zeer vergelijkbare dingen gebeuren in webdesign, alleen met het feit dat de tekst, in plaats van zalazit op de foto, wordt weergegeven (als de Float-eigenschap onjuist is toegepast) ernaast of eronder, maar altijd niet waar de ontwikkelaar het nodig heeft.

CSS Float eigenschap omschrijving

In feite is het vermogen om de Float-eigenschap te gebruiken een zeer goede aas in de mouw voor elke webdesigner. Maar helaas, het gebrek aan begrip van hoe deze functie werkt kan leiden tot botsingen van site-elementen en andere frustraties van dit soort. Vroeger is er ook soortgelijke situaties ontstaan door insecten in browsers. Nu wordt het geheim van het correct gebruik van de eigenschap Float bekendgemaakt, en er hoeven geen problemen meer op te komen.

De eigenschap Float heeft vier betekenissen:

• Vlotter: erven;
• Vlotter: rechts;
• Vlotter: links;
• Vlotter: geen;

Voor degenen die Engels kennen, moeten de waarden van de eigenschappen van Float-eigenschappen duidelijk zijn. Maar voor degenen die het niet weten, is er een kleine uitleg. Parameter : links; Verplaatst het lichaam van het element naar de meest linkerste hoek van het ouderelement. Hetzelfde gebeurt (alleen in de andere richting) met de parameter bcgjkmpjdfybb : rechts; . Waarde : erfenis; Bestelt het element dezelfde instellingen als de ouder aan te nemen. Dergelijke elementen worden ook kinderen genoemd, omdat ze direct in de ouder in de html-code liggen. Een eigenschap : geen; Hiermee kan het element de normale stroom van het document niet breken, het is standaard ingesteld voor alle delen van de code.

Hoe werkt Float?

De Float CSS-eigenschap werkt simpelweg. Alles wat hierboven beschreven is, kan zonder veel moeite gedaan worden. Dan zal alles net zo eenvoudig zijn. Maar voordat u verder gaat met de eigenschappen van Float, is het een beetje inzicht in de theorie waard. Elk element van een website is een blok. Het is makkelijk om dit te zien door de console in Google Chrome te openen door op Ctrl + Shift + J te drukken. De tekst, titel, foto, links en alle overige delen van de site worden in blokken weergegeven, enkel anders. Aanvankelijk gaan al deze blokken elkaar na elkaar. Zoals u in het onderstaande voorbeeld kunt zien, gaan de regels van de code er achter elkaar en daarom worden ze strikt na elkaar getoond.

Dit heet normale stroom. In een dergelijke stroom liggen alle blokken boven elkaar op elkaar (zonder het lichaam van de elementen over te gaan) verticaal. Aanvankelijk ligt de gehele inhoud van de webpagina op deze manier. Maar wanneer u bijvoorbeeld de eigenschappen van de CSS Float Left-taal gebruikt, verlaat het element zijn natuurlijke positie op de pagina en beweegt hij naar de verre linkse positie. Dit gedrag leidt onvermijdelijk tot een botsing met die elementen die in de normale stroom zijn gebleven.

Met andere woorden, de elementen in plaats van verticaal gepositioneerd zijn nu naast elkaar. Als het ouderelement voldoende ruimte heeft om twee kinderen binnen zichzelf te plaatsen, komt er geen botsing voor, en zo niet, dan is het opleggen van een object op een andere onvermijdelijk. Dit is uiterst belangrijk om te onthouden voor het begrijpen van het werk van de Float CSS eigenschap.

Wis functie om problemen op te lossen

De Float-functie heeft een hartvriend - Helder. Samen spoelen ze niet water. Beide functies complementeren elkaar en maken de ontwikkelaar gelukkig. Zoals hierboven vermeld, komen de naburige elementen uit hun normale stroom en beginnen ze te "float", zoals het element waaraan Float eigendom is toegepast (bijvoorbeeld CSS Float Top). Als gevolg daarvan worden er in plaats van een zwevend element twee verkregen, en helemaal niet op de plaats waar zij door de ontwikkelaar zijn gelegen. Vanaf dit moment beginnen precies alle problemen.

De Clear functie heeft vijf waarden:

• : Links;
• : Rechts;
• : Beide;
• : Erven;
• none;

Bij analogie kunt u begrijpen wanneer het de beste is om de Clear functie aan te passen. Als we een regel hebben in de code Float: rechts; (CSS-code is bedoeld), dan moet de functie duidelijk zijn: rechts ;. Het zelfde ding zwaait en de eigenschappen van Float: links; Als aanvulling zal het duidelijk zijn: links; . Bij het schrijven van de code Wissen: beide; Het blijkt dat het element waarop deze functie wordt toegepast, onder de elementen staan waarop de Float-functie wordt toegepast. Inherit neemt de instellingen uit het ouderelement en niemand doet geen wijzigingen in de structuur van de site. и CSS Float-код, который сделает ваш веб-сайт единственным в своем роде. Als u begrijpt hoe de Float and Clear-functies werken, kunt u een unieke en ongewone HTML- en CSS Float-code schrijven die uw website een van een soort maakt.

Gebruik Float om kolommen te maken

Bijzonder nuttig is de eigenschap Float bij het maken van kolommen op een site (of het plaatsen van de inhoud van CSS Float in het midden van een webpagina). Dit is de meest praktische en handige code, dus overweeg een aantal opties voor het maken van een aangepaste sjabloon voor een site bestaande uit twee kolommen. Neem bijvoorbeeld een standaardwebsite met inhoud links, navigatiebalk (navigatiebalk) rechts, titel en voettekst. De code zal zijn:

Nu moeten we begrijpen wat hier geschreven is. Het ouderelement dat het hoofddeel van de html code bevat, heet de container. Hiermee kunt u de elementen die de Float-functie toepast niet geven, in verschillende richtingen dwalen. Als dat niet het geval was, dan zouden deze elementen aan de rand van de browser zwemmen.

Dan is de code #content en #navigation. De Float-functie wordt toegepast op deze elementen. #content wordt naar links gestuurd en #navigatie gaat naar rechts. Dit is nodig om een site van twee kolommen te maken. U moet de breedte opgeven zodat objecten niet overlappen. De breedte kan in procent worden opgegeven. Dus nog handiger dan in pixels. Bijvoorbeeld, 45% voor #content en 45% voor #navigatie, en geef de resterende 10% aan de eigenschap marge.

De Clear-eigenschap, die zich in #footer bevindt, laat de footer niet toe om #navigation en #content te volgen, maar laat het op dezelfde plek waar het zich bevindt. Wat kan er gebeuren? Als u geen willekeurig eigendom opgeeft? In deze code gaat #footer gewoon naar boven en verschijnen onder #navigation. Dit gebeurt doordat #navigatie voldoende ruimte heeft om een ander element op te nemen. In dit illustratieve voorbeeld kunt u heel duidelijk zien hoe de eigenschappen van Clear and Float elkaar aanvullen.

De problemen die u kunt ondervinden bij het schrijven van de code

De bovenstaande voorbeelden zijn vrij eenvoudig. Maar ze kunnen ook problemen hebben. In het algemeen kunnen veel onverwachte problemen zich voordoen met de Float-functie. Hoe vreemd het ook is, problemen komen meestal niet voor bij CSS, maar met de HTML-code. De plaats waar het element met de functie Float in de html-code is gevestigd, heeft direct invloed op het werk van de laatste. Om verschillende soorten moeilijkheden te voorkomen, is het best om een eenvoudige regel te volgen - om de elementen eerst met de Float-functie in de code te plaatsen. Het werkt bijna altijd en minimaliseert hun onverwachte gedrag.

Botsing van elementen

Een botsing vindt plaats wanneer het ouderelement dat meerdere kinderen bevat, niet alle kunnen houden en overlappen. Het gebeurt zelfs dat de elementen niet worden weergegeven, maar verdwijnen van de site. Dit is geen browserbug, maar het verwachte en correcte gedrag van elementen met de Float-functie.

Vanwege het feit dat deze elementen oorspronkelijk in normale stroom zijn, en dan wordt het door de eigenschap Float geschonden, kan de browser ze verwijderen van de pagina van de site. Moet echter niet wanhoop, want de oplossing is simpel en duidelijk - gebruik de eigenschap Cear. Het is mogelijk dat Clear de meest effectieve methode uit alle manieren uit dit probleem is.

Maar het probleem van botsing van elementen van een webpagina kan op een andere manier opgelost worden. Er zijn op zijn minst twee andere manieren:

• Gebruik van de functie Positie;
• Toepassing van Flexbox.

De functie Positie is soms een goed alternatief voor CSS Float. In het midden van de webpagina, bij het toepassen van positie, is het het beste om de afbeeldingen te regelen. Als u de waarden correct toepast: absoluut en: relatief, dan vallen de elementen op elkaar en zullen ze niet overlappen.

Demonteer de Positie en Float-code

и CSS Float заменить на Position. Het is de moeite waard om meer in detail te begrijpen hoe in de HTML code en CSS Float wordt vervangen door Position. In feite is het heel simpel. Stel dat er een element #container en #div is.

#container {

Breedte: 40%;

Vlotter: links;

Marge: 10px;

}

#div {

Breedte: 40%;

Vlotter: rechts;

Marge: 10px;

}

#footer {

Duidelijk: beide;

}

In dit voorbeeld zal het gebruik van de Float-functie (CSS Div) in de tweede container helpen om een standaard site van twee kolommen te maken. Vergeet nooit de functie Clear. Zonder dat kun je alleen elementen boven elkaar op elkaar zetten.

Dus, hoe verander ik de CSS en Float-code om Postion te gebruiken? Het is heel simpel:

#container {

Breedte: 40%;

Positie: relatief;

Marge: 10px;

}

#div {

Breedte: 40%;

Positie: relatief;

Marge: 10px;

}

In dit geval zal #container en #div de gewenste positie van de ontwikkelaar in het ouderelement nemen. Het belangrijkste ding? Plaats #div en #container in een ouderelement dat overeenkomt met hun maten.

Flexbox - hoe helpt deze functie de CSS Float te vervangen?

Flexbox is de meest geavanceerde manier om websites op dit moment te maken, dus deze functie wordt niet ondersteund door oudere versies van browsers. Dit feit mag niet worden verdisconteerd, omdat gebruikers met verouderde versies van browsers de correcte versie van de site niet kunnen zien.

Flexbox is geen eigenschap, maar een aparte module. Daarom ondersteunt flexbox een aantal eigenschappen die er alleen bij werken. Bovendien heeft de display functie, die drie inline, blokkeren en inline-blok in flexbox heeft, slechts één flex-flow.

Hoe werkt Flexbox?

Deze technologie zal de ontwikkelaar helpen om elementen horizontaal en verticaal gemakkelijk uit elkaar te brengen. Flexbox kan ook de richting en de volgorde van de elementen wijzigen. Deze technologie heeft twee assen: Hoofdas en Kruisas, waar de gehele Flexbox is gebouwd. Het verwijdert ook de werking van de Float and Clear-functies. Hij bouwt zijn systeem in code die alleen eigendommen gebruikt die alleen aan hem zijn. Zo kunt u helaas geen andere eigenschappen in elementen, zoals Float en Position, dupliceren. En dit zou heel handig zijn, omdat, zoals hierboven vermeld, Flexbox alleen werkt in nieuwere versies van browsers.

Het is de moeite waard om te onthouden dat Positie, Flexbox en Float uiteindelijk hetzelfde zijn - creëer een ongewoon en origineel ontwerp voor uw site. Elke optie die in het artikel is omschreven, heeft het op zijn eigen manier en dus zowel voor- en nadelen. Bovendien kan het gebeuren dat de Float-functie ergens goed werkt (bijvoorbeeld in een site met een eenvoudige structuur), maar ergens is het beter om positie of flexbox te gebruiken.

Dubbele marge bug

Maar soms, helaas, heeft elke ontwikkelaar problemen, niet gerelateerd aan de geschreven code, maar bij bugs in een bepaald soort browser. Bijvoorbeeld, er is een fout in Internet Explorer genaamd Double Margin Bug. Het vermenigvuldigt de parameter Margin door twee, waardoor de elementen van de site uit de browservariaties verhuizen. Om dit te vermijden, geef gewoon de parameter Margin in procent op. Meestal komt deze fout op als de waarde van de eigenschap Markeer en Float hetzelfde is.

#div {

Vlotter: links;

Margin-links: 10px;

}

Deze code verplaatst het item in Internet Explorer 20 pixels naar links. U kunt de code als volgt wijzigen:

#div {

Vlotter: links;

Marge-links: 10%;

}

Of zo,

#div {

Vlotter: links;

Marge-rechts: 10px;

}

Beide deze opties zullen het probleem van elementverplaatsing oplossen.

Browserbugs en onjuiste weergave van de site

Het is de moeite waard te onthouden dat Internet Explorer niet de enige browser is waarin bugs kunnen optreden. Oude versies van Google Chrome en Mozilla tonen ook enkele elementen van moderne websites onjuist weer. Voor elk van deze insecten kan u een oplossing vinden. In het algemeen wil ik opmerken dat het gebruik van Float een origineel en aantrekkelijk ontwerp van de site zal creëren. Het begrijpen van de grondbeginselen en principes van deze eigenschap zal fouten vermijden en het leven makkelijker maken voor elke ontwikkelaar.