CSS Float

The float property allows to take an element out of its normal flow and push it to the left or right of its container. Anything else in the container will place around the element connected with float property.

Example:

img {
  float: right;
}

Run Example

Values of float Property

  • left - Used to float to the left side.
  • right - Used to float to the right side.
  • none - The element will not float.
  • inherit - Inherit the float property from its parent element.

The clear Property

The clear is specially used when you are working with the float property. The rest of the contents can flow around the floated element. If you do not want this to occur then you have to use clear property. By using clear property surrounding contents will be pushed under the floated element.

Values of clear Property

  • left - Used to clear the left side contents.
  • right - Used to clear the right side contents.
  • both - Used to clear the both side contents.
  • none - The clear property will not work.

Example:

p {
  clear: left;
}

Run Example