CSS flyter, klare og overløpsegenskaper | Forklart

Å plassere HTML -elementer på passende steder er svært viktig når du utformer utformingen av et nettsted. CSS gir flere posisjoneringsegenskaper som hjelper utviklere med å bedre strukturere posisjonen til HTML -elementene.

I tillegg til dette, under nettstedutvikling, kommer vi ofte over visse omstendigheter der innholdet som er til stede i visse HTML -elementer overløper. For å håndtere slike situasjoner gir CSS også visse egenskaper.

I denne guiden vil du gå gjennom følgende CSS -egenskaper.

1. Float Property
2. Klar eiendom
3. Overløpseiendom

La oss begynne.

Float Property

Float -egenskapen blir referert til som en posisjonsegenskap som brukes til å plassere innhold og strukturere utformingen av et nettsted. Denne egenskapen plasserer et element på en slik måte at andre elementer vikler rundt den.

Syntaks

Float: Verdi;

Som andre CSS -egenskaper, gjengir flytegenskapen visse verdier som er listet ut nedenfor.

Verdi	Beskrivelse
ingen	Dette er en standardverdi som forhindrer et element i å flyte og viser elementet der det finnes i teksten.
venstre	For å flyte et element til venstre brukes denne verdien.
Ikke sant	For å flyte et element til høyre brukes denne verdien.
første	For å tilordne den opprinnelige verdien til eiendommen brukes denne verdien.
arve	For å arve denne egenskapen fra foreldrenes eiendom denne verdien brukes.

Her er noen eksempler på float -eiendommen.

Eksempel 1
Anta at du viser litt tekst på nettstedet ditt, og du vil legge til et relevant bilde på høyre side av teksten. Bruk følgende kodebit.

Html

Hunder er ekstremt lojale skapninger. De er søte, lekne og er en manns beste venn. Det er flere hunderaser. Noen av hunderasene er oksehund, Siberian Husky, Golden Retriever og mange flere.

CSS

IMG
FLOAT: HØYRE;
Bredde: 190px;
Høyde: 170px;

I eksemplet ovenfor har vi skrevet litt tekst på hunder og flyttet bildet av hunden til høyre side. Her er utgangen.

Bilde av hunden fløt til høyre.

Hvis i samme eksempel, er float -egenskapen satt til "ingen" i stedet for "riktig", vil bildet av hunden vises der den oppstår i teksten. Slik vil det se ut.

Eksempel 2
Noen ganger for å legge skjønnhet til teksten som vises på nettstedet, bruker du forskjellige skriftfamilier og størrelser. I tillegg til dette å flyte teksten til en passende posisjon er også ganske viktig. Dette eksemplet viser hvordan du flyter et brev i et avsnitt.

Html

DOG -er er ekstremt lojale skapninger. De er søte, lekne og er en manns beste venn. Det er flere
Hunderaser. Noen av hunderasene er oksehund, Siberian Husky, Golden Retriever og mange flere. Hvis du går gjennom
Depresjon eller en viss dårlig fase i livet, det er sterkt foreslått en hund. I tillegg til at disse hundene også brukes til sikkerhet
formål.

CSS

Span
FLOAT: Venstre;
Bredde: 0.8em;
linjehøyde: 90%;
Fontstørrelse: 60px;
Fontvekt: fet;
Font-Family: Times New Roman;

I eksemplet ovenfor flyter vi den første bokstaven i teksten til venstre og gir den en viss stil. Utgangen vises nedenfor.

Den første bokstaven fløt til venstre.

Nå som vi har forstått CSS Float -eiendommen, la oss lære om CSS Clear -eiendommen.

Klar eiendom

Den klare eiendommen er også en posisjoneringseiendom som håndterer elementene som ligger ved siden av elementene som er fløtet.

Hvis du tildeler klar egenskap til et element i samme retning som flottøren, vil den bli skyvet ned under de flytende elementene, ellers, hvis det er nok plass, vil elementet passe sammen med det flytende elementet horisontalt.

Syntaks

klart: verdi;

Tydelige eiendommer viser noen verdier som er forklart nedenfor.

Verdi	Beskrivelse
ingen	Dette er en standardverdi som forhindrer fløtelementer fra å rydde.
venstre	Denne verdien posisjonerer elementer til nedover til venstre for flytende elementer.
Ikke sant	Denne verdien posisjonerer elementer til ned til høyre for flytende elementer.
både	Denne verdien posisjonerer elementer til både ned til venstre og høyre for de flytende elementene.
første	Denne verdien tildeler egenskapen sin opprinnelige verdi.
arve	For å arve denne egenskapen fra foreldrenes eiendom denne verdien brukes.

La oss utforske den klare eiendommen ytterligere ved hjelp av passende eksempler.

Eksempel 1
Vi lærer hvordan den klare eiendommen fungerer ved å bruke hundeksemplet som er nevnt i delen ovenfor.

Html

Hunder er ekstremt lojale skapninger. De er søte, lekne og er en manns beste venn. Det er flere hunderaser. Noen av hunderasene er oksehund, Siberian Husky, Golden Retriever og mange flere.

CSS

IMG
FLOAT: Venstre;
Bredde: 170px;
Høyde: 170px;

Nå i eksemplet over er det to elementer som er

og . Imidlertid blir bare fløt til venstre. Nå, for å forstå hvordan den klare eiendommen fungerer, vil vi bruke klart for

element. Bruk følgende kodebit.

p.klar
klart: til venstre;

Her har vi brukt klart på

i samme retning som flottøren.

Produksjon
Før du bruker klart.

Etter å ha brukt klart.

Teksten er ryddet til venstre for det flytende bildet.

Du kan bruke andre verdier av den klare egenskapen ved å bruke eksemplet ovenfor for å se hvordan de fungerer.

Overløpseiendom

Overløpsegenskapen kontrollerer oppførselen til innholdet som strømmer over det spesifiserte området til et element, dessuten er overløpsegenskapen bare designet for elementer på blokknivå.

Syntaks

overløp: verdi;

Ulike verdier av overløpsegenskapen er gitt nedenfor:

Verdi	Beskrivelse
synlig	Dette er en standardverdi, og den vil vise alt innholdet som overstiger elementets spesifiserte område.
skjult	Denne verdien skjuler alt innholdet som overskrider elementets spesifiserte område.
bla	Denne verdien skjuler innholdet som overskrider elementets område inne i det og gir både vertikale og horisontale rullefelt for å se innholdet.
bil	Denne verdien tilfører bare en rullefelt når det er nødvendig.
første	Denne verdien tildeler egenskapen sin opprinnelige verdi.
arve	For å arve denne egenskapen fra foreldrenes eiendom denne verdien brukes.

Nå for en bedre forståelse av denne egenskapen, vil vi vurdere ett eksempel, og gjennom det vil vi demonstrere forskjellige verdier av overløpseiendommen.

Eksempel.

I dette eksemplet skal vi lage et og plassere noe innhold i det og se hvordan forskjellige overløpseiendommer fungerer.

Html

Overløpsegenskapen kontrollerer oppførselen til innholdet som strømmer over det spesifiserte området til et element, dessuten er overløpsegenskapen bare designet for elementer på blokknivå.

La oss først illustrere den synlige verdien av overløpsegenskapen.

CSS

.div1
overløp: synlig;
Bakgrunnsfarge: Rosybrown;
Bredde: 100px;
Høyde: 145px;
Grense: 2px solid svart;

Produksjon

Ved å bruke den synlige verdien av overløpsegenskapen, vises innholdet utenfor boksområdet.

Nå vil vi illustrere den skjulte verdien av overløpsegenskapen. Her er kodebiten.

.div1
overløp: skjult;

Produksjon

Innholdet som overskrider boksområdet er skjult.

Kodebiten for rulleverdien til overløpsegenskapen er som følger.

.div1
overløp: bla;

Produksjon

Ved hjelp av rullefeltene kan resten av innholdet sees.

Og nå får vi se hvordan bilverdien til overløpseiendommen fungerer.

.div1
overløp: auto;

Produksjon

I henhold til krav la bilverdien bare den vertikale rullefeltet.

Ved hjelp av bilverdien er det overfylte innholdet skjult inne i boksen.

Konklusjon

De Float Property brukes til å plassere innhold og strukturere utformingen av et nettsted, dessuten plasserer denne egenskapen et element på en slik måte at andre elementer vikler seg rundt den. De klar eiendom, På den annen side håndterer elementene som ligger ved siden av elementene som er fløtet. I mellomtiden Overløpseiendom Kontrollerer oppførselen til innholdet som flommer over det spesifiserte området til et element. Alle disse egenskapene viser visse verdier som utfører forskjellige handlinger på disse egenskapene. Disse egenskapene og deres verdier, blir forklart i dybden ved hjelp av eksempler i denne oppskrivningen.