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 −
float: [value];
The float property supports values described in the table given here −
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 −
<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 −
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. |
<!DOCTYPE html> <html> <head> <style> img{ float:right; } </style> </head> <body> <p>Float image from right</p> </body> </html>