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).
column
(floating on the left)column
(floating on the left)column
(floating on the left)column
(floating on the left)