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.
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.