Eigenschappen voor zwevende elementenTot de eigenschappen voor zwevende elementen behoren: float en clear. Voor een algemene toelichting op de plaatsing van zwevende elementen, zie het onderdeel CSS en elementen. Bij de voorbeelden van de verschillende eigenschappen is een afbeelding opgenomen, waarop te zien is hoe de weergave zou moeten zijn. Klik op de afbeelding en bekijk in een nieuw venster of de browser het voorbeeld (correct) ondersteunt. |
| float |
Met de float eigenschap kan een element zwevend worden worden gemaakt en daardoor een andere plaats krijgen dan normal (zie normal flow). Mogelijke waarden zijn left, right en none. De werking van de float eigenschap is vergelijkbaar met die via het ALIGN attribuut bij het IMG of het TABLE element, alleen kunnen nu ook andere elementen "zwevend" gemaakt worden. Met de waarde none wordt het element op plaats weergegeven, waar dat normaal het geval zou zijn. Met de waarden left of right wordt box van een zwevend element naar links, respectievelijk naar rechts verplaatst tot de margin, border of padding van een ander element op blokniveau is bereikt. Vaak is dat het parent element, maar het kan ook een sibling element zijn (een element op hetzelfde niveau). Een inline element met de eigenschap float: left of float: right wordt behandeld als een element op blokniveau. Eventuele child elementen verplaatsen met een zwevend element mee. De box van een zwevend element wordt compleet weergegeven, inclusief paddings, borders en margins. De margins van een zwevend element en aangrenzende elementen schuiven niet in elkaar. De beginwaarde is none. De eigenschap kan gebruikt worden voor alle elementen. De eigenschap wordt niet geërfd. De float eigenschap wordt niet ondersteund door Microsoft Internet Explorer 3. Door Microsoft Internet Explorer 4 wordt de float eigenschap alleen ondersteund voor replaced elementen, voor tabellen en voor DIV en SPAN indien daar de width eigenschap aan is toegevoegd. Netscape Navigator ondersteunt de float eigenschap niet voor alle replaced elementen. De opbouw is: float: waarde
|
| Een voor de hand liggend gebruik van de float eigenschap is het zwevend maken van afbeeldingen. In het volgende voorbeeld wordt de afbeelding met de eigenschap float: left links van de tekst geplaatst. | |
<P><IMG SRC="dsd-k.gif" STYLE="float: left">De afbeelding ... weer.</P>
|
|
| Met de eigenschap float: right wordt de afbeelding rechts van de tekst geplaatst. | |
<P><IMG SRC="dsd-k.gif" STYLE="float: right">De afbeelding ... weer.</P>
|
|
| De float eigenschap kan ook voor andere elementen dan het IMG element gebruikt worden. In het volgende voorbeeld is dat gedaan om een zwevende kop te maken. | |
<P><SPAN STYLE="float: left; font-size: 36pt; width: 100px; padding-right: 1px">float</SPAN>De inhoud ... negeert.</P>
|
|
| Zie ook de voorbeelden bij de beschrijving van zwevende elementen in het onderdeel CSS en elementen. | |
| clear |
Met clear eigenschap wordt aangegeven of er links en/of rechts van het element wel of geen zwevende elementen mogen voorkomen. Mogelijke waarden zijn none, left, right en both. De werking van de clear eigenschap is hetzelfde als via het CLEAR attribuut bij het BR element. Zo verplaatst de waarde left het element tot onder enig zwevend element aan de linkerzijde. De beginwaarde is none. De eigenschap kan gebruikt worden voor alle elementen en wordt niet geërfd. De clear eigenschap wordt niet ondersteund door Microsoft Internet Explorer 3. De opbouw is: clear: waarde
|
| De beginwaarde none van de clear eigenschap bepaalt dat zwevende elementen wel zijn toegestaan naast het element waaraan de eigenschap wordt toegevoegd. In het voorbeeld had de clear eigenschap dus ook weggelaten kunnen worden. | |
<P><SPAN STYLE="float: left; font-size: 36pt; width: 60pt; padding-right: 5pt">clear</SPAN><SPAN STYLE="clear: none">In dit voorbeeld ... eigenschap.</SPAN></P>
|
|
| In het volgende voorbeeld wordt de eigenschap clear: left gebruikt om aan te geven dat links van het element geen zwevend element mag voorkomen. | |
<P><SPAN STYLE="float: left; font-size: 36pt; width: 60pt; padding-right: 5pt">clear</SPAN><SPAN STYLE="clear: left">In dit voorbeeld ... verplaatst.</SPAN></P>
|
|
|
|
