CSS Float: beskrivelse, egenskaper

Float - en av de grunnleggende funksjonene i språket CSS (er Cascading de Style Sheets - formatering brus). Dette språket har eksistert siden 1996 og er fortsatt videreutvikle. For øyeblikket har utviklerne brukt den tredje versjonen av CSS. Med CSS programmeringsspråk det er mulig å skape et vakkert og behagelig sted som vises ikke utdatert eller ubehagelig for brukeren, selv om du ikke brukte Javascript. Moderne muligheter for den tredje versjonen av tillatelsen.

Dessuten kan utviklere bruke mer praktisk formateringsalternativer, for eksempel flexbox eller posisjon for å endre elementet på plass på stedet, men det viktigste først. For å begynne å forstå fordeler og ulemper Float egenskaper.

CSS Float - hvorfor er det nødvendig?

Float - egenskap for posisjoneringselementer. Hver dag, kan det ses på sidene av aviser og blader, ser på bilder og tekst, noe som er veldig pent wraps dem rundt. и CSS при использовании функции Float должно произойти то же самое. I en verden av HTML og CSS-kode ved hjelp Float funksjonen skal skje det samme. Men det er verdt å huske at bilderedigering er ikke alltid det viktigste formålet med denne funksjonen. Den kan brukes til å lage den populære plasseringen av elementene i området i to, tre, fire kolonner. Faktisk er Float CSS egenskapen brukes til nesten enhver html-element. Å vite det grunnleggende redigering av layoutelementer med Float-funksjon, og deretter Eiendom, for å lage noen design av nettstedet vil ikke være vanskelig.

Spesielle DTP-programmer kan noen ganger ignorere bildene, og å gå over dem. Nok lignende ting skjer og webdesign, med bare lys av teksten, i stedet for å klatre på bildet vises (hvis de brukes feil egenskaper Float) ved siden av den, eller under det, men ikke alltid der du trenger en utvikler.

CSS Float beskrivelse av eiendommen

Faktisk, muligheten til å bruke Float eiendom er en veldig god ess i hullet for en webdesigner. Men, dessverre, mangel på forståelse av hvordan dette fungerer kan føre til kollisjoner og andre elementer av nettstedet sorger av denne typen. Tidligere har også slike situasjoner oppstår på grunn av feil i nettlesere. Nå er hemmeligheten om hvordan du skal bruke Float eiendommen vil bli åpnet, og ingen problemer med det bør ikke være større.

Vi Float hotellet har fire verdier:

• Float: arve;
• Float: right;
• Float: left;
• Float: none;

For de som kjenner engelsk, parametrene Float eiendommen må være klart. Men for de som ikke vet, kan du ta med en liten forklaring. Parameter: venstre; Den beveger elementet kroppen i mest ekstreme venstre hjørne av den overordnede element. Det samme skjer (bare den andre veien) når bcgjkmpjdfybb parameter: right; . Verdi: arve; beordrer elementet inntar den samme form som den på den overordnede. Slike elementer kalt barnet likevel, som de er plassert rett innenfor hoved html kode. En eiendom: none; Det gjør at elementet ikke forstyrre den vanlige flyten av dokumentet, som er satt som standard for alle deler av koden.

Hvordan Float arbeid?

Float CSS eiendom fungerer ganske enkelt. Alt som har blitt beskrevet ovenfor, kan gjøres uten store problemer. Etter det, vil alt være like lett. Men før jeg fortsetter å studere Float egenskaper, verdt en liten titt inn i teorien. Hvert element av nettstedet er å blokkere. Det er lett å se dette ved å åpne konsollen i Google Chrome ved å trykke Ctrl + Shift + J. tekst, tittel, bilde, linker, og alle andre komponenter i området vil bli vist blokker, bare forskjellige størrelser. I utgangspunktet er alle disse blokkene etter hverandre. Som vist i eksempelet nedenfor koden strengen farten etter hverandre, og slik at de synes å være strengt etter hverandre.

Dette kalles en normal strøm (normal flow). Når alle slike blokker faller innenfor hverandre (kroppen uten å krysse elementer) vertikalt. I utgangspunktet alt innholdet på nettsidene som ligger på denne måten. Men når du bruker, for eksempel egenskapene til språket CSS Float Venstre, forlater element sin naturlige posisjon på siden og beveger seg mot venstre. Denne virkemåten fører til den uunngåelige kollisjon med de elementer som har forblitt i den normale.

Med andre ord er elementene i stedet plasseres vertikalt, er nå ved siden av hverandre. Hvis den overordnede elementet er nok plass til at det kan romme to barn innvendig, ikke kollisjon ikke forekomme, men hvis ikke, ileggelse av ett objekt til et annet er uunngåelig. Det er svært viktig å huske for forståelsen av egenskapene til Float CSS.

Clear funksjon for å løse problemer

Vi Float har et hjerte hver - Gjennomsiktig. Sammen - ikke søler vann. Begge disse funksjonene utfyller hverandre og gjør utvikleren lykkelig. Som nevnt ovenfor, nabocellene går ut av sin normale og også begynne å "flyte" som element som Float hotellet ble benyttet (for eksempel CSS Float toppen). Som et resultat, i stedet for et flytende element blir to, og ikke på det stedet hvor de skal arrangere utbygger. Fra det øyeblikket er bare begynnelsen alle problemer.

På Clear funksjon har fem verdier:

• : Left;
• : Høyre;
• : Begge;
• : Arv;
• none;

Ved analogi kan vi forstå når det er best å bruke Clear-funksjonen. Hvis vi har skrevet en linje i koden Float: right; (CSS-kode er ment), må funksjonen være klart: riktig ;. De samme egenskapene til bergarter og Float: left; det vil utfylle Clear: left; . Når du skriver kode Clear: begge; Det viser seg at det element som den er påført, vil denne funksjonen være under de elementene som er benyttet flytestilling. Arv tar innstillinger fra den overordnede element, men ingen gjør ikke noen endringer i strukturen av nettstedet. и CSS Float-код, который сделает ваш веб-сайт единственным в своем роде. Hvis du forstår hvordan Float og Clear funksjoner, kan du skrive en unik og uvanlig HTML og CSS Float-kode, noe som vil gjøre nettstedet ditt unikt i sitt slag.

Bruke Float å opprette kolonner

Float spesielt nyttig funksjon når du lager kolonner på området (eller plasseringen av CSS Float innholdet i sentrum av websiden). Det er denne koden er den mest praktiske og praktisk, så du bør vurdere flere alternativer for å lage den vanlige nettstedet malen består av to kolonner. For eksempel ta en standard nettside med innhold på venstre navigasjonsfeltet (navigasjonsfeltet) til høyre, topp- og bunntekst. Koden ser slik ut:

Nå trenger vi å forstå hva som er skrevet her. Den overordnede element i hvilken hoveddelen av HTML-kode kalles en beholder (beholder). Den lar deg hindre at elementer som er brukt Float funksjon å spre seg i ulike retninger. Hvis det ikke var, da disse elementene har fløt opp til grensene av nettleseren.

Så, i koden og gå #content #navigation. Disse elementer brukes Float funksjon. #content sendes til venstre og til høyre er #navigation. Det er nødvendig å lage et nettsted med to kolonner. Sørg for å angi bredden, slik at gjenstandene ikke overlapper hverandre. Du kan angi bredden og prosentandel. Så selv mer komfortable enn i piksler. For eksempel vil 45% til 45% og #content for #navigation, og de resterende 10% gi egenskap margin.

Eiendom Clear, som er i #footer, følger ikke bunn #navigation og #content, men overlater det til samme sted hvor han var. Hva kan skje? Hvis du ikke angir Clear eiendom? I denne koden #footer bare gå opp og vil være under #navigation. Dette skjer på grunn av det faktum at #navigation nok plass til å romme mer enn ett element. I dette illustrerende eksempel er det godt synlig hvordan egenskapene til Clear Float og utfyller hverandre.

Problemer du kan støte på når du skriver kode

De ovennevnte eksempler er enkel. Men med dem kan føre til problemer. Vanligvis, faktisk, kan en rekke uventede problemer skje med Float funksjon. Uansett hvor merkelig, men problemer vanligvis ikke skje med CSS og html-kode. Stedet hvor elementet med Float-funksjon i en html-kode direkte påvirker det endelige arbeidet. For å unngå ulike typer problemer, er det best å holde seg til enkle regler - posisjonering elementer Float funksjon av den første koden. Nesten alltid det fungerer, og for å minimere deres uventede oppførsel.

sammenstøt av elementene

Kollisjon oppstår når overordnede element inneholder flere barn får ikke plass til dem alle, og de overlapper hverandre. Det skjer selv at varene ikke kan vises, og forsvinner fra området. Dette er ikke en feil nettleser, og det er forventet og korrekt oppførsel av elementer med Float funksjon.

På grunn av det faktum at disse elementene er i utgangspunktet i den normale, og da er det brutt Float eiendom leseren kan fjerne dem fra området. Men fortvil ikke, fordi løsningen er enkel og klar - bruk Cear eiendom. Det er mulig at alle veier ut av dette problemet, er den mest effektive bruken av Clear.

Men problemet med kollisjon av web sideelementer kan løses på annen måte. Det er minst to måter:

• Plasser bruk av funksjon;
• søknad flexbox.

Posisjon funksjon er ofte et godt alternativ til CSS Float. I sentrum av nettsiden i tilfelle av søknaden Stillingen er best å plassere bildet. Når den er riktig påført verdier: absolutt og: relativ, er elementene faller på plass og vil ikke bli overlagret på hverandre.

Posisjon Analyse og Float funksjonskode

и CSS Float заменить на Position. Det bør håndtere mer med hvordan HTML og CSS Float erstattet av posisjon. Faktisk er det veldig enkelt. La oss si at det er et element #container og #div.

#container {

bredde: 40%;

float: venstre;

margin: 10px;

}

#div {

width: 40%;

float: right;

margin: 10px;

}

#footer {

klar: begge;

}

I dette eksempel er anvendelse av funksjoner i den andre beholder (CSS Div) Float vil bidra til å skape et område av standard to kolonner. Aldri glemme Clear funksjon. Uten det vil bare overlappe elementer oppå hverandre.

Så hvordan kan du endre CSS og Float kode for å bruke posisjon? Veldig enkelt:

#container {

bredde: 40%;

stilling: i forhold;

margin: 10px;

}

#div {

bredde: 40%;

stilling: i forhold;

margin: 10px;

}

I dette tilfellet #container #div og ta den nødvendige posisjonen av utvikler i den overordnede element. Det viktigste? sette #div og #container en av foreldrene element, som vil svare til sin størrelse.

Flexbox - denne funksjonen vil erstatte CSS Float?

Flexbox - den mest avanserte måten å lage websider i øyeblikket, så denne funksjonen ikke støttes av eldre versjoner av nettlesere. Dette faktum ikke utelukkes, for brukere med eldre versjoner av nettlesere vil ikke kunne se den riktige versjonen av nettstedet.

Flexbox er ikke en egenskap, som en egen modul. Derfor flexbox støtter en rekke egenskaper, som fungerer bare med ham. I tillegg, hvis funksjon displayet, som har tre parametere inline, blokk og inline-blokk i flexbox det bare er en flex-strømning.

Hvordan flexbox?

Denne teknologien bidrar utvikleren å enkelt justere elementer horisontalt og vertikalt. Flexbox kan også endre retning og rekkefølgen av displayelementer. I denne teknologien, er det to akser: hovedaksen og Cross-aksen, rundt der hele flexbox bygget. Det fjerner også effekten Float og Clear funksjoner. Han bygger sitt system i koden, som bruker en unik for sin eiendom, så dessverre ikke kunne replikere i cellene andre egenskaper, for eksempel Float og posisjon. Og det vil være veldig nyttig, fordi, som nevnt ovenfor, flexbox bare fungerer i nyere versjoner av nettlesere.

Det er verdt å huske at i endestilling, flexbox Float og gjøre det samme - å skape en uvanlig og original design av nettstedet ditt. Hver versjon av omtalt i artikkelen gjør det på sin egen måte, og derfor har både fordeler og ulemper. I tillegg hender det at et sted perfekt Float-funksjon (for eksempel på stedet med en enkel struktur), men et sted bedre å bruke den posisjon eller flexbox.

Double Margin Bug

Men noen ganger, dessverre, alle utviklere Problemer oppstår ikke fra skriftlig kode, med feil og i noen nettleser-spesifikk form. For eksempel i Internet Explorer, er det en bug, som kalles Double Margin Bug. Han multipliserer parameter Margin i to, som fører til forskyvning av elementene i området utenfor nettleseren. For å unngå dette, er det tilstrekkelig å indikere parameter Margin Prosent. Vanligvis oppstår denne feilen når verdien av y og egenskaper Margin Float punkt.

#div {

float: venstre;

margin-left: 10px;

}

Denne koden vil skifte elementet i Internet Explorer 20 px venstre. Du kan endre koden som følger:

#div {

float: venstre;

margin-: 10%;

}

eller så

#div {

float: venstre;

margin-right: 10px;

}

Begge disse alternativene vil løse problemet med ledeelementer.

Bugs nettleser og feil skjerm stedet

Det er verdt å huske at Internet Explorer - er ikke den eneste nettleseren som kan oppstå feil. Eldre versjoner av Google Chrome og Mozilla også feilaktig vise noen elementer av moderne nettsider. For hver av disse reparasjonene, kan du finne en løsning. Generelt ser vi at bruken av Float vil skape en original og attraktiv webdesign. Forstå det grunnleggende og prinsippene for denne eiendommen vil bidra til å unngå feil og gjøre livet enklere for alle utviklere.