CSS Float

Float is used to align an element to the left or right side of its container.

It is similar to text-align but the main difference between them is that Align does not remove the item from the document flow whereas float removes it.

Property Values

The possible values are as follows:

Values Description
right It aligns the element along the right side.
left Default value. It aligns the element along the left side.
inherit It inherits the alignment of the parent.

Float Example

Below example will demonstrate the basic architecture of CSS Float

Float text to right
p {
  float: right;
}


Float text to left
p {
  float: left;
}


Float text as inherit
p {
  float: inherit;
}


Example:
<!doctype html>  
<html>

    <head>
        <title>...</title>
    </head>
  
    <body>
       <p style="float: right;">Learn CSS from PHPDocs.</p>
    </body>

</html>