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

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

CSS Float Property Values

Value	Description
none	It specifies that the element is not floated, and will be displayed just where it occurs in the text. this is a default value.
left	It is used to float the element to the left.
right	It is used to float the element to the right.
initial	It sets the property to its initial value.
inherit	It 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%;}