CSS - Float




CSS Float

Sometimes you need to use the next wrap feature in a document to properly arrange the position of images with respect to their description. For instance, you need to set an image as floated to right side and rest of the content in the left side.

CSS allows you to implement the text wrap feature in a Web page by using the float property.

Float property makes an HTML element as a floated element and defines the side where other elements are displayed.

The syntax to use the float property is given as follows −

Syntax

float: [value];

The float property supports values described in the table given here −

For Example
Value Description
left Floats an element to the left with respect to the content.
right Floats an element to the right with respect to the content.
none Does not float an element.
inherit Floats an element using the same float settings as specified for its parent element.

The following code fragment floats an image in the right side −

Example

<p>
  <img src="image.gif" alt="image" style="float: right;" />
  The text is in left direction.
</p>

You can disable the effect of the float property by using the clear property. This means that you can turn off the effect of the float property by using the clear property.

The syntax to use the clear property is given as follows −

clear: [value];

The clear property supports values descried in the following table −

For Example
Value Description
left Disables the effect of a left floated element.
right Disables the effect of a right floated element.
both Disables the effect of both left and right floated.
none Does not disable the effect of a floated element.
inherit Uses the same clear settings as specified for its parent element.

Example

<!DOCTYPE html>  
<html>  
<head>  
<style>  
img{
 float:right;	
}
</style>  
</head>  
<body>  
<p>Float image from right</p>
</body>  
</html>

Result