Float Property

The element with float property can be set to left, right and none. The float property works only in horizontal directions. The element can be floated in left and right side, but not on top and down side.

       The box will float in right and left direction only. There are three values for the float property “left, right, none”

Example of the float property as follows:

The following example shows when you click on the radio button with float value as left or right or none. It will show you the output.

Left

Right

none

 Div 1

This is sample div element for the property. This element shows the output after the float property is set to left or right of the document. Here we are going to put a lot of extra text This will help us to demonstrate how the float property works.This is sample div element for the property. This element shows the output after the float property is set to left or right of the document. Here we are going to put a lot of extra text This will help us to demonstrate how the float property works.This is sample div element for the property. This element shows the output after the float property is set to left or right of the document.

Clear property

The clear property controls weather element having float property should float around the element with clear property. This property has four values those are      

- left : Element will not float on the left side of the element.

           -   right : Element will not float on the right side of the element having the property clear.

     -  both : The element will not allow any floating element on the both sides .

     - none: It will allow the element to float on both sides.

    Following is the example to demonstrate how the clear and float properties behave when used together:

Select Float Property

Left

Right

none

Select Clear Property

Left

Right

both

none

 Div 1

This is sample div element for the property. This element shows the output after the float property is set to left or right of the document. Here we are going to put a lot of extra text This will help us to demonstrate how the float property works.This is sample div element for the property. This element shows the output after the float property is set to left or right of the document. Here we are going to put a lot of extra text This will help us to demonstrate how the float property works.This is sample div element for the property. This element shows the output after the float property is set to left or right of the document.