CSS Float

CSS Float property places an element on the left or right side of its container, allowing text and inline elements to wrap around it. The element is removed from the normal flow of the page, though still remaining a part of the flow (in contrast to absolute positioning).

img  {
  float: right;

CSS Float Uses

Float is a CSS positioning property. To understand its purpose and origin, we can look to print design. In a print layout, images may be set into the page such that text wraps around them as needed. In web design, page elements with the CSS float property applied to them are just like the images in the print layout where the text flows around them. Floated elements remain a part of the flow of the web page.

CSS Float Properties

clearThe clear property is used to avoid elements after the floating elements which flow around it.left, right, both, none, inherit
floatIt specifies whether the box should float or not.left, right, none, inherit

CSS Float Property Values

noneIt specifies that the element is not floated, and will be displayed just where it occurs in the text. this is a default value.
leftIt is used to float the element to the left.
rightIt is used to float the element to the right.
initialIt sets the property to its initial value.
inheritIt is used to inherit this property from its parent element.

CSS Float Examples

The first letter of a paragraph float to the left and style the letter:

span {
  float: left;
  width: 0.9em;
  font-size: 500%;
  font-family: algerian, courier;
  line-height: 90%;

Use float with a list of hyperlinks to create a horizontal menu:

.header, .footer {
  background-color: sky blue;
  color: orange;
  padding: 16px;

.column {
  float: right;
  padding: 16px;

.clearfix::after {
  content: "";
  clear: both;
  display: table;

.menu {width: 30%;}
.content {width: 80%;}