CSS Float: beskrivning, egenskaper

Float - en av de grundläggande funktionerna i språket CSS (är Cascading Style Sheets - formatering lapp). Detta språk har funnits sedan 1996 och är fortfarande fortsätter att utvecklas. Just nu har utvecklarna använt den tredje versionen av CSS. Med programmeringsspråk CSS är det möjligt att skapa en vacker och tilltalande webbplats som inte visas föråldrade eller obekvämt för användaren, även om du inte använder JavaScript. Moderna möjligheter den tredje versionen av tillståndet.

Dessutom kan utvecklare använda mer bekväma formateringsalternativ, såsom Flexbox eller position för att ändra den del av utrymmet på platsen, men det viktigaste först. Till att börja förstå fördelarna och nackdelarna Float egenskaper.

CSS Float - varför behövs det?

Float - egendom för positioneringselement. Varje dag kan man se på sidorna av tidningar och tidskrifter, titta på bilderna och texten, som är mycket prydligt sveper dem runt. и CSS при использовании функции Float должно произойти то же самое. I en värld av HTML och CSS-kod med hjälp av flytfunktion skulle hända samma sak. Men det är värt att komma ihåg att bildredigerings är inte alltid det huvudsakliga syftet med denna funktion. Den kan användas för att skapa den populära platsen för delar av webbplatsen i två, tre, fyra kolumner. I själva verket är Float CSS egendom som används för att praktiskt taget alla html-element. Genom att känna till grunderna i att redigera layoutelement med hjälp av flytfunktion, och sedan egendom, att skapa någon utformningen av sajten kommer inte vara svårt.

Speciella DTP program kan ibland ignorera bilderna och gå över dem. Nog liknande saker händer och webbdesign, med endast mot bakgrund av texten, snarare än klättra på bilden visas (om de används på fel sätt Float egenskaper) bredvid eller under det, men inte alltid där du behöver en utvecklare.

CSS Float beskrivning av fastigheten

I själva verket är möjligheten att använda Float egenskapen en mycket bra ess i hålet för alla webbdesigner. Men tyvärr kan brist på förståelse för hur det fungerar leder till kollisioner och andra delar av webbplatsen sorger av detta slag. Tidigare även sådana situationer uppstår på grund av buggar i webbläsare. Nu hemligheten med hur man korrekt använder Float fastigheten kommer att öppnas, och inga problem med det bör inte vara större.

Vi Float Fastigheten har fyra värden:

• Float: ärva;
• Float: right;
• Float: left;
• Float: none;

För dem som känner engelska, parametervärdena Float egendom måste vara tydlig. Men för dem som inte vet, kan du ta en liten förklaring. Parameter: vänster; Den rör sig elementet kroppen i de mest extrema vänstra hörnet av det överordnade elementet. Samma sak händer (endast åt andra hållet) när bcgjkmpjdfybb parameter: right; . Värde: ärva; beordrar elementet att anta samma konfiguration som den hos föräldern. Sådana element kallas barn fortfarande, eftersom de befinner sig direkt i den överordnade html-koden. En egenskap: none; Det gör det element som inte störa den vanliga flödet av dokument, som är inställd som standard för alla delar av koden.

Hur Float arbete?

Float CSS egendom fungerar helt enkelt. Allt som har beskrivits ovan, kan göras utan större svårigheter. Efter det kommer allt att vara lika enkelt. Men innan jag fortsätta studera Float egenskaper, värt en liten inblick i teorin. Varje webbplats är en del av blocket. Det är lätt att se detta genom att öppna konsolen i Google Chrome genom att trycka Ctrl + Shift + J. text, titel, bild, länkar och alla andra komponenter i webbplatsen kommer att visas block, bara olika storlekar. Initialt är alla dessa block efter varandra. Som framgår av exemplet nedan koden strängen gå en efter en, och så de verkar vara strikt efter varandra.

Detta kallas ett normalt flöde (normalt flöde). När alla sådana block faller inom varandra (kropp utan att passera element) vertikalt. Inledningsvis allt innehåll i webbsidor som ligger på detta sätt. Men när man använder till exempel egenskaper CSS Float Vänster språkelement lämnar sin naturliga position på sidan och flyttar till vänster. Detta beteende leder till den oundvikliga kollisionen med de delar som har befunnit sig i normala.

Med andra ord, är elementen i stället placerade vertikalt, är nu intill varandra. Om det överordnade elementet finns tillräckligt med utrymme så att den kan rymma två barn inne, inte kollisionen inte inträffa, men om inte, är det oundvikligt att införa ett objekt till ett annat. Det är oerhört viktigt att komma ihåg för förståelsen av egenskaperna hos Float CSS.

Clear funktion för att lösa problem

Vi Float har ett hjärta varje - Clear. Tillsammans - inte spilla vatten. Båda dessa funktioner kompletterar varandra och gör utvecklaren glad. Såsom nämnts ovan, angränsande celler gå ut ur deras normala och även börja "flyta" som elementet till vilket Float egenskap användes (till exempel, CSS Float Top). Som ett resultat, i stället för ett flytande element blir två, och inte på den plats där de hade för avsikt att ordna utvecklaren. Från det ögonblicket är bara början alla problem.

På Clear funktionen har fem värden:

• : Vänster;
• : Höger;
• : Båda;
• : Inherit;
• ingen;

I analogi kan vi förstå när det är bäst att använda Clear funktionen. Om vi har skrivit en rad i koden float: right; (CSS-kod är tänkt) måste funktionen vara tydlig: rätt ;. Samma egenskaper stenar och float: left; Det kommer att komplettera Clear: vänster; . När du skriver kod Clear: båda; det visar sig att det element som den tillämpas, kommer den här funktionen att vara under de element som tillämpade Float funktion. Inherit tar inställningar från det överordnade elementet, men ingen inte göra några förändringar i strukturen på webbplatsen. и CSS Float-код, который сделает ваш веб-сайт единственным в своем роде. Om du förstår hur Float och Clear funktioner, kan du skriva en unik och ovanlig HTML och CSS Float-kod, som kommer att göra din webbplats unik i sitt slag.

Använda Float att skapa kolumner

Float särskilt användbar funktion när du skapar kolumner på sajten (eller platsen för CSS Float halten i mitten av webbsidan). Det är denna kod är det mest praktiskt och bekvämt, så du bör överväga olika alternativ för att skapa den vanliga platsen mall bestående av två kolumner. Ta till exempel en vanlig webbplats med innehåll på vänstra navigeringsfältet (navigeringsfältet) till höger, sidhuvud och sidfot. Koden ser ut så här:

Nu måste vi förstå vad som skrivs här. Det överordnade elementet i vilket huvuddelen av html-koden kallas en behållare (behållare). Det gör att du kan förhindra att element, som tillämpas Float funktion att sprida i olika riktningar. Om det inte var, då dessa element har flutit upp till gränserna för webbläsaren.

Därefter, i koden och gå #content #navigation. Dessa element används Float funktion. #content skickas till vänster och till höger är #navigation. Det är nödvändigt att skapa en webbplats med två kolumner. Var noga med att ange bredd, så att föremålen inte överlappar varandra. Du kan ange bredd och procenttal. Så ännu bekvämare än i pixlar. Till exempel för att 45% till 45% och #content för #navigation, och resterande 10% ger egenskapen marginal.

Egendom Clear, som är i #footer, följer inte sidfot #navigation och #content, men lämnar det till samma plats där han var. Vad kan hända? Om du inte anger Klar egendom? I denna kod #footer bara gå upp och kommer att vara under #navigation. Detta händer på grund av det faktum att #navigation tillräckligt utrymme för att rymma mer än ett element. I detta belysande exempel är det tydligt hur egenskaperna hos Clear Float och kompletterar varandra.

Problem som kan uppstå när du skriver kod

Exemplen ovan är enkla. Men med dem kan orsaka problem. Generellt, i själva verket kan en hel del oväntade problem råkar Float funktion. Oavsett hur konstigt, men problemen brukar inte förekomma med CSS och HTML-kod. Platsen där elementet med Float funktion i en html-kod direkt påverkar det slutliga arbetet. För att undvika olika typer av svårigheter, är det bäst att hålla sig till enkla regler - positioneringselement Float funktion den första koden. Nästan alltid det fungerar och att minimera oväntat beteende.

Clash of the Elements

Kollision inträffar när det överordnade elementet innehåller flera barn kan inte ta emot dem alla, och de överlappar varandra. Det händer till och med att produkterna inte kan visas, och försvinner från platsen. Detta är inte en bugg webbläsare och det förväntas och korrekt beteende av element med flytfunktion.

På grund av det faktum att dessa element är initialt i normala, och sedan bryts Float egendom webbläsaren kan ta bort dem från sajten. Men misströsta inte, eftersom lösningen är enkel och tydlig - använd Cear egendom. Det är möjligt att alla vägar ut ur detta problem, är det mest effektiva användningen av Clear.

Men problemet med kollisionen mellan webbsidan element kan lösas på annat sätt. Det finns åtminstone två sätt:

• Placera användningen av funktion;
• ansökan Flexbox.

Position funktionen är ofta ett bra alternativ till CSS Float. I mitten av webbsidan vid ansökan Position är bäst att placera bilden. Vid korrekt tillämpade värden: absolut och: släkting, elementen falla på plats, och kommer inte att överlappa varandra.

Position Analys och Float funktionskoden

и CSS Float заменить на Position. Det borde handla mer med hur HTML och CSS Float ersättas med ståndpunkten. I själva verket är det mycket enkelt. Låt oss säga att det finns ett element #container och #div.

#container {

bredd: 40%;

float: vänster;

margin: 10px;

}

#div {

bredd: 40%;

float: höger;

margin: 10px;

}

#footer {

tydligt: båda;

}

I detta exempel användningen av funktioner i den andra behållaren (CSS Div) Float kommer att bidra till att skapa en standard platsen för två kolumner. Glöm aldrig Clear funktionen. Utan det bara kommer att överlagra element ovanpå varandra.

Så hur du ändrar CSS och Float kod för att använda postion? Mycket enkel:

#container {

bredd: 40%;

positioner: relativ;

margin: 10px;

}

#div {

bredd: 40%;

positioner: relativ;

margin: 10px;

}

I det här fallet #container #div och vidta nödvändiga position utvecklare i det överordnade elementet. Det viktigaste? sätta #div och #container en överordnade elementet, som kommer att motsvara deras storlek.

Flexbox - denna funktion kommer att ersätta CSS Float?

Flexbox - den mest avancerade sättet att skapa webbplatser just nu, så den här funktionen stöds inte av äldre versioner av webbläsare. Detta faktum inte uteslutas, för användare med äldre versioner av webbläsare kommer inte att kunna se den korrekta versionen av webbplatsen.

Flexbox är inte en egenskap som en separat modul. Därför Flexbox stöder ett antal egenskaper, som fungerar endast med honom. Dessutom visningsfunktion, som har tre parametrar inline, block- och inline-blocket i Flexbox finns det bara en flex-flöde.

Hur Flexbox?

Denna teknik hjälper utvecklare att enkelt justera element horisontellt och vertikalt. Flexbox kan också ändra riktning och ordningen för displayelement. I denna teknik finns det två axlar: huvudaxel och Cross-axeln, kring vilken hela Flexbox byggt. Det tar också bort effekten Float och tydliga funktioner. Han bygger sitt system i koden, som använder en unik till sin egendom, så tyvärr inte att kunna replikera i celler andra egenskaper, såsom Float och ställning. Och det skulle vara mycket praktiskt, eftersom, som nämnts ovan, Flexbox fungerar endast i nyare versioner av webbläsare.

Det är värt att komma ihåg att i slutpositionen, Flexbox Float och göra samma sak - skapa en ovanlig och ursprungliga utformningen av din webbplats. Varje version av den diskuteras i artikeln gör det på sitt eget sätt, och därför har både fördelar och nackdelar. Dessutom händer det att någon perfekt Float funktion (till exempel på platsen med en enkel struktur), men någonstans bättre att använda Position eller Flexbox.

Double Marginal Bug

Men ibland tyvärr uppstår alla utvecklare problemen inte från skriven kod, med buggar och i vissa webbläsare specifik form. Till exempel i Internet Explorer, det finns en bugg, som kallas Double Margin Bug. Han multiplicerar Marginal parameter till två, vilket resulterar i förskjutningen av delar av webbplatsen i webbläsaren gränsen. För att undvika detta är det tillräckligt att ange parametern Marginal Procent. Vanligtvis felet inträffar när värdet på y och egenskaperna Marginal Float punkt.

#div {

float: vänster;

margin-left: 10px;

}

Denna kod kommer att förskjuta elementet i Internet Explorer 20 px vänster. Du kan ändra koden på följande sätt:

#div {

float: vänster;

margin-vänster: 10%;

}

eller så

#div {

float: vänster;

margin-höger: 10px;

}

Båda dessa alternativ kommer att lösa problemet med förskjutningselement.

Bugs webbläsare och felaktig visning plats

Det är värt att komma ihåg att Internet Explorer - är inte den enda webbläsare som kan uppstå fel. Äldre versioner av Google Chrome och Mozilla också felaktigt visa vissa delar av moderna webbplatser. För vart och ett av dessa korrigeringar kan du hitta en lösning. I allmänhet kan vi konstatera att användningen av Float kommer att skapa en originell och attraktiv webbdesign. Förstå grunderna och principerna för denna fastighet kommer att bidra till att undvika misstag och göra livet lättare för alla utvecklare.