Vilket element flyter egentligen?

2 svar · 442 visningar · startad av eriks 29 maj 2010

eriksMedlem sedan apr. 20011 418 inlägg

Frågan29 maj 2010 15:29#1

Hehej,

En sak jag länge har stört mig på i CSS:

Om man tittar på definitionen för float på w3schools så säger den "The float property specifies whether or not a box (an element) should float.". Men jag tycker inte att det specificerar huruvida ett element ska flyta, utan snarare huruvida elementet efter ska flyta eller inte..?

Exempel: Om jag vill ha en två kolumner bredvid varandra skriver jag:

<div style="width:100px;float:left;">Kolumn 1</div>
<div>Kolumn 2</div>

I min mening är det tvåan som flyter, vilket jag gör genom att sätta ett attribut på tidigare element, inte det aktuella.

Är ni med på hur jag menar och håller ni med? Definitioner och detaljer, men jag vill kolla så att jag har förstått det hela rätt...

Erik

FuelMedlem sedan okt. 20001 285 inlägg

29 maj 2010 16:04#2

Det element som du ger float / ska flyta gör det också, visuellt kan det se ut som tvärt om pgr av att det första påverkar det andra elementets position. Det finns clear: left , right & both för att fixa det.

tantenMedlem sedan nov. 20051 596 inlägg

31 maj 2010 04:59#3

Jag vet att jag hade svårt att få in float-tänket också i början.
Men om du tänker som så att båda divarna (alla element) tar upp 100% av sidan utan css.
När du skriver att div1 ska vara 100pixlar bred, så flyter den ihop till den bredden och lämnar resten av "sin normala plats" till höger om sig, för något annat att lägga sig där.
Sätter du ingen bredd på div2 så kommer den ta upp resten av platsen. Om du sätter 100pxbred och float right på den så kommer den att lämna plats åt något annat mellan sig och div1. Och med float left hamnar den bredvid div1 och lämnar plats på högra sidan osv.