Float

In this chapter we will learn about how to use float property.

The float property defines if a box or an element should float or not.

The float property has values, about it you will see in the bottom of the page.

CSS Syntax

float: none | left | right | initial | inherit;

Let's see an example:

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

        <img src="/uploads/media/default/0001/01/003e5c463668d174ab70bea245c192d81901a4a6.png" width="220" height="100">
        <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Phasellus sit amet diam. </p>
        <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Phasellus sit amet diam. Duis mattis varius dui. Suspendisse eget dolor. Fusce pulvinar lacus ac dui. Praesent ullamcorper, turpis ut tempus tincidunt, odio purus blandit ipsum, vel scelerisque metus leo eget massa. Aliquam erat volutpat. In ultrices mi nec erat. Nulla facilisi. Vivamus a tellus ut risus accumsan accumsan. </p>

    </body>
</html>

Now let's see an example, where the picture will be set at the left part.

<!DOCTYPE html>
<html>
   <head>
      <style>
            body{background-color:#3f3f3f;}            
            p{color:#ffffff; }
            img {float: left; margin-right:20px}
      </style>
   </head>
   <body>

        <img src="/uploads/media/default/0001/01/003e5c463668d174ab70bea245c192d81901a4a6.png" width="220" height="100">
        <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Phasellus sit amet diam. </p>
        <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Phasellus sit amet diam. Duis mattis varius dui. Suspendisse eget dolor. Fusce pulvinar lacus ac dui. Praesent ullamcorper, turpis ut tempus tincidunt, odio purus blandit ipsum, vel scelerisque metus leo eget massa. Aliquam erat volutpat. In ultrices mi nec erat. Nulla facilisi. Vivamus a tellus ut risus accumsan accumsan. </p>

    </body>
</html>

Property Values

Value Descriptions
none It means that the element is not floated and it will be displayed where it comes in the text. It is the default value of this property.
left It means that the element floats to left.
right It means that the element floats to right.
initial It makes the property use its default value.
inherit It inherits the property from its parents element.