CSS Layout - Flytande och Rensa

CSS Layout - Flytande och Rensa

CSS float Egenskapen specificerar hur elementet flyter.

CSS clear Egenskapen specificerar vilka element som kan flyta vid sida om rengöringselementet och på vilket håll.

float egenskap

float Egenskapen används för att placera och formatera innehåll, till exempel att låta bilden flyta till vänster till texten i containern.

float Egenskapen kan ställa in ett av följande värden:

  • left - Elementet flyter till vänster i sin container
  • right - Elementet flyter till höger i sin container
  • none - Elementet flyter inte (visas på den plats där texten just uppstod). Standardvärde.
  • inherit - Elementet tar över float-värdet från sitt föräldre element

Den enklaste användningen är att:float Egenskapen kan realisera effekten av att texten omger bilden (på tidningar).

Exempel - float: right;

I detta exempel specificeras att bilden bör ligga i texten till höger:

Ananas

Leading Web Technology Tutorials - All Free. At CodeW3C.com, you can find all the website construction tutorials you need, from basic HTML to CSS, to advanced XML, SQL, JS, PHP.

Our reference manual covers all aspects of website technology. This includes W3C standard technologies such as HTML, CSS, XML. And other technologies such as JavaScript, PHP, SQL, etc.

At CodeW3C.com, we provide thousands of examples. By using our online editor, you can edit these examples and experiment with the code.

Example

img {
  float: right;
}

Try it yourself

Exempel - float: left;

I detta exempel specificeras att bilden bör ligga i texten:VänsterFlytande:

Ananas

Leading Web Technology Tutorials - All Free. At CodeW3C.com, you can find all the website construction tutorials you need, from basic HTML to CSS, to advanced XML, SQL, JS, PHP.

Our reference manual covers all aspects of website technology. This includes W3C standard technologies such as HTML, CSS, XML. And other technologies such as JavaScript, PHP, SQL, etc.

At CodeW3C.com, we provide thousands of examples. By using our online editor, you can edit these examples and experiment with the code.

Example

img {
  float: left;
}

Try it yourself

Exempel - Inget flyt

I exemplet kommer bilden att visas på den plats där texten just uppstod (float: none;):

Ananas Leading Web Technology Tutorials - All Free. At CodeW3C.com, you can find all the website construction tutorials you need, from basic HTML to CSS, to advanced XML, SQL, JS, PHP. Our reference manual covers all aspects of website technology. This includes W3C standard technologies such as HTML, CSS, XML. And other technologies such as JavaScript, PHP, SQL, etc. At CodeW3C.com, we provide thousands of examples. By using our online editor, you can edit these examples and experiment with the code.

Example

img {
  float: none;
}

Try it yourself

Further reading

Supplementary books:CSS float