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