The CSS properties float in action

It is often difficult to achieve positioning element as we would in an HTML page, because the float property, which serves to align them, follows complex rules.

In fact when we have to align images at left or right while integrating them into the text flow, everything is simple, but what is more complicated is the creation of a page layout.

Demonstration and test

This demonstration shows how layers works with different values for the float property, each in relation to others in a container that also has different values for the position attribute. The order of elements in the code also plays a role.
It may be useful to test it on different browsers.

Parameters of the page: container: none elements 1: none 2: left 3: right

Choose values in drop-down lists and click on the "GO" button.

Property position of outer layer :

Float :

1

Float :

2

Float :

3
To reset the page, press ENTER in the URL bar.

How float works

The property takes the following values ...

left

The element is displayed on the left inside the container. Other elements or text surround it on the right and below.

right

The element is displayed in the right inside the container.

none

The element is introduced into the flow after the previous element.

inherit

Same value as the container.

There is no value "center".

Things to know

- The property display: inline added to an element allows float in the same element to work better.

- The margin property separates the element inserted in the text of the body thereof. The margin accounts within the container and not inside the page.

- Clear is used in conjunction with float, when we want to start to a new horizontal line after the float element.

References

© 2009-2022 Xul.fr