CSS Floating


an element can be pushed to the left or right, allowing other elements to wrap around it.

Float is very often used for images, but it is also useful when working with layouts.

CSS Syntax

float: none|left|right|initial|inherit;
Property Value Description
none The element is not floated, and will be displayed just where it occurs in the text. This is default
left The element floats to the left
right The element floats the right
initial Sets this property to its default value.
inherit Inherits this property from its parent element.

Elements Float

Elements are floated horizontally, this means that an element can only be floated left or right, not up or down.

A floated element will move as far to the left or right as it can. Usually this means all the way to the left or right of the containing element.

The elements after the floating element will flow around it.

The elements before the floating element will not be affected.

img {
       float:left;
      }

Using Clear

Elements after the floating element will flow around it. To avoid this, use the clear property.

The clear property specifies which sides of an element other floating elements are not allowed.

Example

.text {
       clear:both;
      }

Share this article on