| NOTE: Some simplified definitions are obtained from the Recommendation of W3C on the Style sheets in Cascade, 2 Level Revision 1 (CSS2.1), that is in Section HTML/CSS of this Web. |
| Before making an exercise of creation of a horizontal menu, I am going to explain the Float property, that we will need to use. |
| |
 FLOAT left, right, none
|
| It specifies if a box must float to the left, the right, or not float. That a box floats, means that the box moves alongside that it is indicated in the property, remaining site free that it is possible to be occupied by other boxes, depending on the property CLEAR that I explain ahead. For a box or block to be considered floating, it must define specifically its width, as it is logical, to be able to limit his space and to assign the rest to the possible later content. |
|
 left: |
|
The block is located to the left of the adjacent elements. |
|
right: |
|
The block is located to the right of the adjacent elements. |
|
none: |
|
The block is not floating. |
| |
|
| The following code shows 2 blocks DIV that are not floating. By its nature of elements of type block, it will position one underneath the other. |
 |
| The EXAMPLE shows the result. |
| The new code now positions the black box to the left. |
 |
| The EXAMPLE shows the new result. |
| Try changing the float to the right. |
| |
| |
CLEAR left, right, both, none |
| This property indicates which of the sides of the box of an item can not be adjacent to an earlier floating box. This implies that we specify the property CLEAR on the next element after element with float. |
|
left: |
|
The element does NOT allow floating elements on the left. |
|
right: |
|
The element does NOT allow floating elements on the right. |
|
both: |
|
The element does NOT allow floating elements anywhere. |
|
none: |
|
The element allows floating elements on both sides. |
| |
|
| If we add a CLEAR to the code of the previous example: left; to caja2, caja1 will float to the left, but to its right caja2 will not be placed because the property Clear specifies it (it says that it will not place any floating block to its left). |
 |
| The EXAMPLE shows how Clear acts. |
| And up to here this brief tutorial. These two properties, that at first can not seem very useful, they are essential in determined occasions. An example of its use is in the creation of horizontal menus, as we are going to see in the following tutorial. |
| |
Español
English
