Float-over hjelpen i HTML

May 7

Flottøren Eiendommen er en CSS posisjoneringsverktøyet som forteller en fløt element for å flytte til side; alle andre elementer på siden ordne for rundt fløt element. Flytende kan legges til en HTML-kode ved hjelp av "stil" egenskap - for eksempel <div style = "float: left;"> - og kan vikle innholdet rundt et element eller å strukturere søyler og elementer på siden uten å bruke absolutt posisjonering .

forstå Floa

Du kan stille inn et element å flyte enten venstre eller høyre; det vil gå så langt som mulig til den definerte side mens du følger strømmen av innholdet. Når elementet er fløt, andre elementer på siden vikle rundt det. Fordelen for flytende elementer er i fleksibilitet; du kan endre størrelsen på fløt element på innfall, og resten av siden vil samsvare rundt det. Hvis du har flere flytende elementer ved siden av hverandre, de stakk til side. Du kan bruke dette til din fordel for å lage kolonner eller en rad med elementer.

Bruker for en Float

Eksperimentering med flottøren attributtet er den enkleste måten å se hva som fungerer. Hvis du ønsker å legge ned et bilde i en kropp av tekst, ved hjelp av en flåte får teksten til å bryte rundt det. Dette er den enkleste anvendelse av en flytende element, men på ingen måte den eksklusive en. Hvis du ønsker å legge inn et sitat i kroppen av teksten, som blader noen ganger vil å bringe fokus til et punkt, kan du bruke en flytende div eller span elementet for å formatere og legge inn tekst. Ved å bruke flyte eiendommen med div lag, kan du strukturerer hele siden uten å bruke tabeller; dette skaper en mer fleksibel søyler layout som bruker mindre kode enn tabeller. Du kan også bruke fløt span elementer for å gjøre den første bokstaven i et avsnitt større enn resten av teksten.

Opprette et flytende element

Du kan legge til flottøren eiendommen til noen HTML-koden ved hjelp av "stil" tag; Dette er Messier enn ved bruk av stil, men kan være aktuelt dersom du ikke har tilgang til nettstedets stilark eller bare ønsker å bruke den for en forekomst av elementet. Flytende en grunnleggende bilde på denne måten ville se slik ut:

Dette fungerer på samme måte for alle andre HTML-koden du ønsker å feste den flytende egenskapen til; hvis du ønsker å gjøre hver enkelt bilde på nettstedet ditt flyte til venstre, kan du legge den til stilark slik:

img {
float: left;}

Hvis du ønsker å opprette kolonner på en nettside, kan du lage en beholder og bruker flytende å inneholde kolonner og en full bredde bunntekst. En grunnleggende gjennomføring av denne er

<Div style = "width: 500;">
<Div style = "float: left; width: 250;"> Kolonne 1 </ div>
<Div style = "float: right; width: 250;"> Kolonne 2 </ div>
<Div style = "width: 500; klar: begge;"> bunntekst </ div>
</ Div>

Hvis du ikke vil at det neste elementet i flyten av innholdet til å vikle rundt fløt element, kan du angi dette ved å sette inn en tom div element under den, f.eks
<Div style = "clear: left;"> </ div>

Hvis du ønsker dette elementet til å inneholde noe, for eksempel et bunnteksten på en side, det trenger ikke å være tomt. Du kan også bruke "clear: right" hvis det flytende element ble satt til høyre, eller "klart: både" å fjerne alle forekomster av flytende.

Ulemper til Floa

Mens flytende er mer flytende, gir dette den til flere feil. Hvis man har to flyteelementer ved siden av hverandre i en søyler oppsett, som har et bilde eller en tabell som overskrider bredden av moder div kan bryte strømmen, noe som tvinger den andre kolonne nedenfor den første. Flytende støttes i alle de store nettleserne, men kan ikke bli støttet i eldre nettlesere; sørg for å teste oppsettet i flere nettlesere for å se etter feil.