CSS - Float


   CSS - Float

  • The float property causes an element to be moved to one side of the parent element.
  • In CSS, float is intended for wrapping text around images.

Syntax :

img
{
float: right;
margin: 0 0 10px 10px;
}

Sample Code :

<!DOCTYPE html>
<html>
    <head>
        <style>
            img {
                float: right;
                margin: 0 0 10px 10px;
            }
        </style>
    </head>
        <body>
            <p><img src="http://www.wikitechy.com/img/logo.png" alt="wikitechy.com" width="400" height="140">
                Welcome to wikitechy.com the best e-learning website in the world.
                Where you can learn all the robust technologies easily.
            </p>
        </body>
</html>

Code Explanation :


    Img is an html element used to insert an image in to the web page.  

   Float property with value as right will display the element which is floated to the right side of its parent elements content area.

   Margin property for the img element will allocates a space for an image from the four margins.

  <p> is the parent element. The image will float to the right of paragraph, where the paragraph text will wrap around the image.

Output :


  Wikitechy.com logo image will appear right-hand side of the paragraph text and the image is wrapped around the text.