Progetti
Software
Formazione
Links & dritte
 
Sistemi
Elettronica
Matematica
Tai Ji Quan
Giada Adriani
 
Tesi
Appunti
Recensioni
 
Pillole
Racconti
Romanzi
Ospiti
 
Giochi
Eventi
Work-e
Ma.Ste.R.
 
Links
Cerca
Chi sono
Contatti
Mappa del sito
Arrows down Arrows up

Introducing the FLOAT and CLEAR properties

This page shows some examples about the float and clear properties. The first selector (below) defines the properties for the sample division (the gray box where results are shown). The margined selector aims to place the image using the MARGIN property, but the result will depend by the paragraph's size. The last selector applies the float property to align an image on the right.
See below for the result when applying these CSS definitions.

When an element has the float property, all elements after the element (with respect to the HTML source flow) will wrap around it. If we want to put and end to the "float layout", we must specify the clear property for the first element that should restore the standard flow layout. For this reason the clear property must not be applied to the image element (the one which is floating), but it must be applied to the element restoring the standard flow.
Let's consider the CSS definition below, and the box showing the result.

Using the float property we define some elements which are note inline nor block, but they are "out" from the ordinary HTML flow. That's why we say they are "floating over" the HTML flow. Below we show as to exploit such property to create a very simple 4 columns layout (without using any table).

This is a division having class column (floating on the left)
This is a division having class column (floating on the left)
This is a division having class column (floating on the left)
This is a division having class column (floating on the left)