Float

Learn text flow with float.

Pin an element to a side: float

Once a layout workhorse, the float property pins an element to the left or right side and lets the following content flow beside it. Values are left, right, none, and inherit.

The best-known use is to float an image to the right or left of a paragraph. The image pins to the side, and the text wraps around it. This behavior is called text wrap.

How does text wrap work?

When an image is floated left with float: left, the text right after it starts at the top-right of the image and flows down the side; once the image ends, the text continues full width below it.

This resembles the image-text layout in magazine pages. A margin-right gap between image and text improves readability. The same idea with float: right pins the image right and lets text flow on its left.

Exercise Float the image and leave a gap

Write an img type selector. Add a float: left declaration plus a margin-right declaration to leave a gap between the image and text. The image floats left, and text flows on its right.

Show example solution

/* float the image left */
img {
  float: left;
  margin-right: 1rem;
}

Test yourself

What does float: left do?
```
img {
  float: left;
  margin-right: 1rem;
}
```
- Hides the image
- Floats the image to the right
- Fixes the image in place
- Floats the image left and wraps text beside it
Show answer

Floats the image left and wraps text beside it — Correct. float: left pins the image to the left and lets the following text flow beside it.
Float the image left
```
img {
  ____;
}
```
Show answer
```
img {
  float: left;
}
```
Match each float value to its meaning

left

Pins to the left
right

Pins to the right
none

Cancels the float
inherit

Takes from parent

Next lesson: Clear and clearfix

We Are Enhancing Your Experience

Cookie Preferences

Strictly Necessary Cookies

Analytical Cookies