CSS Layout - Flydende og Rydd

CSS Layout - Flydende og Rydd

CSS float Egenskaben bestemmer, hvordan elementet skal flytte sig.

CSS clear Egenskaben bestemmer, hvilke elementer, der kan flytte sig ved siden af afklarende elementer og på hvilket side.

float egenskab

float Egenskaben bruges til at placere og formatere indhold, f.eks. lade billeder flytte sig til venstre mod teksten i containeren.

float Egenskaben kan indstilles til en af følgende værdier:

  • left - Elementet flytter sig til venstre i sin container
  • right - Elementet flytter sig til højre i sin container
  • none - Elementet vil ikke flytte (vil vises på den position, hvor teksten netop optræder). Standardværdi.
  • inherit - Elementet arver float-værdien fra sin forælder

Den mest enkle brug er:float Egenskaben kan opnå (på aviser) effekten af tekst omgivet af billeder.

Eksempel - float: right;

I dette eksempel specificeres, at billedet skal være flyttet til højre i teksten:

Ananas

Første klasse Web-teknologi tutorials - helt gratis. På CodeW3C.com kan du finde alle de webconstruction tutorials, du har brug for. Fra grundlæggende HTML til CSS, og til avancerede XML, SQL, JS, PHP.

Vores referencehåndbog dækker alle aspekter af webteknologi. Dette inkluderer W3C standardteknologier: HTML, CSS, XML. Og andre teknologier som JavaScript, PHP, SQL osv.

På CodeW3C.com tilbyder vi tusindvis af eksempler. Ved at bruge vores online redigeringsværktøj kan du redigere disse eksempler og eksperimentere med koden.

Eksempel

img {
  float: right;
}

Prøv det selv

Eksempel - float: left;

I dette eksempel specificeres, hvor billedet skal være i tekstenTil venstreFloat:

Ananas

Første klasse Web-teknologi tutorials - helt gratis. På CodeW3C.com kan du finde alle de webconstruction tutorials, du har brug for. Fra grundlæggende HTML til CSS, og til avancerede XML, SQL, JS, PHP.

Vores referencehåndbog dækker alle aspekter af webteknologi. Dette inkluderer W3C standardteknologier: HTML, CSS, XML. Og andre teknologier som JavaScript, PHP, SQL osv.

På CodeW3C.com tilbyder vi tusindvis af eksempler. Ved at bruge vores online redigeringsværktøj kan du redigere disse eksempler og eksperimentere med koden.

Eksempel

img {
  float: left;
}

Prøv det selv

Eksempel - Ingen float

I eksemplet nedenfor vil billedet vises på den position, hvor teksten netop optræder (float: none;):

Ananas Første klasse Web-teknologi tutorials - helt gratis. På CodeW3C.com kan du finde alle de webconstruction tutorials, du har brug for. Fra grundlæggende HTML til CSS, og til avancerede XML, SQL, JS, PHP. Vores referencehåndbog dækker alle aspekter af webteknologi. Dette inkluderer W3C standardteknologier: HTML, CSS, XML. Og andre teknologier som JavaScript, PHP, SQL osv. På CodeW3C.com tilbyder vi tusindvis af eksempler. Ved at bruge vores online redigeringsværktøj kan du redigere disse eksempler og eksperimentere med koden.

Eksempel

img {
  float: none;
}

Prøv det selv

Udvidet læsning

Ekstrabog:CSS flydende