[Althalos]

Jag har en kod som ser ut såhär:

<p>
Beskrivning
<img src="url" alt="" class="rgt" />
<div class="clear"></div>
</p>

d.v.s inom p har jag text och en bild som är float: right; samt en div som har clear: both;

Av någon anledningen beter sig denna kod som om det inte finns någon clear. Jag kan visserligen få fram rätt resultat på annat sätt, men jag skulle ändå vara intresserad om någon kunde förklara vad som händer?

[akelagercrantz]

Antingen kan du sätta float på p-taggen, såhär:
http://pastie.org/1048494

Eller så använder du overflow: hidden; (bättre alternativ)
http://pastie.org/1048496

[Althalos]

Hm, intressant! Tack för svaret. Går detta att förklara med några regler?

[akelagercrantz]

http://css-tricks.com/all-about-floats/

[Althalos]

Den artikeln förklarar din metod, men den förklarar inte egentligen varför <div class="clearl"></div> inte fungerar. Såvida p inte är block men det bör det väl vara...

[akelagercrantz]

Om du sätter float på ett element kommer dess container inte att anpassa sig efter det flytande elementets storlek (det flytande elementet tas ur innehållsflödet). När du använder clear-tricket så gör du så att alla efterföljande element ändå tar hänsyn till det flytande elementet istället för det sista elementet som är med i flödet ( i ditt fall <p> ).

I ditt exempel fanns inga efterföljande element som kunde påverkas av din clear-div, därför fungerar det inte.

Jämför dessa:
http://pastie.org/1048701
http://pastie.org/1048704

[Althalos]

Hm okej, tack för den information nu förstår jag logiken bättre.