CSS : Clear:left,right,both ?

Hey Aminoer

Jeg har altid spekuleret over hvad clear:left,right,both gør men forstår det simpelthen ikke?, er da en venlig gut der lige kan forklare det?

Hej Arlo,

Det er egentlig meget simpelt.

CSS udtrykket clear:left, fortæller at der ingen flydende elementer må være på venstre side af elementet.

CSS udtrykket clear:right, fortæller at der ingen flydende elementer må være på højre side af elementet.

CSS udtrykket clear:both, fortæller at der ingen flydende elementer må være på begge sider af elementet.

I praksis fungerer det hammer godt, og er ikke til at undværer i moderne webdesign.

Du kan eksempelvis lave et flydende div-element mod venstre (float:left), med hen højde på 100px og en bredde på 100px. Så vil den meget simpelt gå ud og være i venstre side af indholdet. Hvis du vælger at benytte en <div style='clear:both'></div> under float elementet, vil indholdet (Alt det som er skrevet efter div-clear) placere sig under det flydende element.

Jeg håber det giver lidt mening :-)

God beskrivelse Patrick.

Lige lidt ekstra herfra. 

Når man taler layout i HTML er der to slags måder display elementerne viser sig på:
- block
- inline

Eksempelvis er h- og p-tags block elementer. Dvs de efterfølgende elementer altid starter på en ny automatisk linje. 

inline-elementer, derimod, placerer sig automatisk til højre ligeefter forudgående, hvis der er plads (medmindre du begynder at bruge position:absolut)

Et godt tip til at lære CSS i praksis er at lege med elementerne og give dem allesammen en forskellig background-color. Det kan spare en for en masse besvær med at vide hvilke, der evt skal rettes på at man kan se hvor høj, bred og hvor elementerne er. 

Jeg har engang lavet weblayout med spalter etc pixel-præcist efter en tegning, og der var det trick virkeligt noget, der hjalp.  

Poul Madsen:

Her skifter jeg mellem om et foto skal være til højre eller venstre, og et par steder er der eksempler på, at teksten smuger sig rundt om fotoet. Hvis jeg bruger left, placeres fotoet til højre og teksten til ventre - eller osse er det omvendt.

Poul - nu må du ikke forvirre manden mere end højst nødvendigt.

Det du taler om er float:left og float:right - og bruges ganske rigtigt til at placere elementer eller billeder til venstre eller højre.

Men her er der egentlig tale om det modsatte - nemlig clear:left og clear:right.

Disse bruges f.eks. hvis du IKKE vil have teksten til at smyge sig rundt om billedet - men i stedet starte under billedet i en ny linje. :-)

Allan I:

Poul - nu må du ikke forvirre manden mere end højst nødvendigt.

Det du taler om er float:left og float:right - og bruges ganske rigtigt til at placere elementer eller billeder til venstre eller højre.

Allan, det er altså ikke helt rigtigt, beklager. Jeg bruger float nu - faktisk bruger jeg begge dele - men inden jeg brugte float, brugte jeg clear, og det fungerede nogenlunde på samme måde. Jeg var bare nødt til at lære om float, fordi hjemmesiderne ikke blev vist rigtigt i Google Chrome. I IE var det stadig ok.