clear

Siden er opdateret 20. 12. 2011

Egenskaben clear bruges til at sikre sig, at det efterfølgende element ikke lægger sig vedsiden af et floated element.

<div>
<p style="float:left;margin-right:15px;"><img src="billede.gif width="100" height="67" alt=""></p>
<p style="float:left;">En hel masse tekst til billedet</p>
</div>
<p style="clear:left;">Mere tekst til billedet</p>

Når du skal vælge, om du skal bruge clear: left eller clear: right, så se på hvilket float ovenover, der er længst. Sæt dit clear til at gå under det længste float.

Hvis der er usikkerhed om, hvilken float der er længst - den ene indeholder måske et billede, som selvfølgelig har fast størrelse, mens den anden er længere eller kortere afhængig af størrelsen på browservinduet, kan du bruge clear:both.

Dette billede er et maleri, jeg selv har malet. Det måler 90 × 60 cm. og motivet er hentet i Dragør.

Denne tekst er med clear:left sat til at lægge sig længere nede end billedet til venstre herover.


Lægges der en border eller baggrund på den omgivende boks, er det nødvendigt at lægge en clear ind i boksen, hvis teksten ikke kan fylde ud, ned forbi billedet.

Dette billede er et maleri, jeg selv har malet. Det måler 90 × 60 cm. og motivet er hentet i Dragør - her uden clear.

Den indsatte clear kan uden problemer være tom.

Dette billede er et maleri, jeg selv har malet. Det måler 90 × 60 cm. og motivet er hentet i Dragør - her med clear.

<div style="margin-top:15px;border:1px solid #eee;">
<p style="float:left;margin-right:15px"><img src="billede.gif width="100" height="67" alt=""></p>
<p style="float:left;">En hel masse tekst til billedet</p>
<p style="clear:left;"></p>
</div>

En alternativ mulighed kunne være at sætte en min-height lig med billedets højde på den omgivende boks. Et andet alternativ er at bruge clear-fix, som jeg har beskrevet herunder.


clearfix

Lægger du en farvet baggrund i eller en border om en boks, hvori der er et venstre-floated billede og en tilhørende u-floated tekst, vil du umiddelbart se, at den omgivende boks optisk ikke når ned forbi billedet, hvis teksten ikke fylder mindst det samme i højden som billedet.

Samme problem vil du opleve, hvis du i en sådan ydre boks laver to tekstspalter, hvor den venstre-floatede er længere end den højre u-floatede.

<div style="color:black;background:#cce;>
<p style="float:left;margin-right:15px"><img src="images/maleri.jpg" width="100" height="67" alt=""></p>
<p>Tekst til billedet</p>
</div>

Dette billede er et maleri, jeg selv har malet. Det måler 90 × 60 cm. og motivet er hentet i Dragør.

Som du kan se, går det galt, hvis teksten ikke fylder nok til at gå ned forbi billedet. Man må så lave en lille tilføjelse i form af clearfix:

I css:
.clearfix:after {
content: ".";
display: block;
height: 0;
clear: both;
visibility: hidden;
}
/* Skjul for IE-mac \*/
/* html */.clearfix {
height: 1%;
}
/* Slut på Skjul for IE-mac */

I html: <div class="clearfix" ... >

Dette billede er et maleri, jeg selv har malet. Det måler 90 × 60 cm. og motivet er hentet i Dragør.

^ Tilbage til sidens top

Valid XHTML og CSS / Copyright © Hjemmesideskolen marts 2003
Hjemmesideskolen
Du er her: Forsiden - css - egenskaber - clear
sidens top
Brugere lige nu: 1
Home Mail