CSS Float

❮ Previous Home Next ❯

The float property influences the horizontal alignment of an element, making it “float” toward the left or right margin of its containing element.

The clear property specifies the placement of an element in relation to floating objects.



Float




Floating Elements with CSS

You can float elements to the left or right, but only applies to the elements that generate boxes that are not absolutely positioned. Any element that follows the floated element will flow around the floated element on the other side.

The float property possible values are:




float: right;

The following example demonstrate an image float to the right in a text:

Lorem Ipsum is simply dummy text of the printing and typesetting industry.

Lorem Ipsum is simply dummy text of the printing and typesetting industry.

Lorem Ipsum is simply dummy text of the printing and typesetting industry.


Example

img {
 float:right;
}



float: left;

The following example demonstrate an image float to the left in a text:

Lorem Ipsum is simply dummy text of the printing and typesetting industry.

Lorem Ipsum is simply dummy text of the printing and typesetting industry.

Lorem Ipsum is simply dummy text of the printing and typesetting industry.


Example

img {
 float: left;
}






No float

The following example demonstrate an image float to the none in a text:

Lorem Ipsum is simply dummy text of the printing and typesetting industry.

Lorem Ipsum is simply dummy text of the printing and typesetting industry.

Lorem Ipsum is simply dummy text of the printing and typesetting industry.


Example

img {
 float: none;
}



clear

The clear property specifies what should happen with the element that is next to a floating element.

Possible Values are:

The following example demonstrate element float to the left in a text clear:

Example

.clear {
  clear: left;
}
p {
  float: left;
  margin: 10px;
  padding: 10px;
  color: white;
  background: #1A73E8;
}



Clearfix

If a floated element is taller than the containing element, it will "overflow" outside of its container.

You can then add a clearfix to solve this problem.

Without Clearfix

Lorem Ipsum is simply dummy text of the printing and typesetting industry.

With Clearfix

Lorem Ipsum is simply dummy text of the printing and typesetting industry.

Example

.clearfix {
  overflow: auto;
}



The new, modern clearfix hack however, is safer to use, and the following code is used for most webpages.

Example

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



All CSS Margin Properties

Property Description
clear Specifies the placement of an element in relation to floating objects.
float Sets whether an element should float to the left, right, or not at all.
❮ Previous Home Next ❯