The CSS `float` property moves an element to the left or right of its container and lets nearby text and inline content wrap through the space beside it. Use it when an image, caption, or decorative letter should sit within running text rather than interrupt it. section 7.1.3 section 7.0
Wrap an article around an image and caption
Keep the image and caption together in a `<figure>`, then apply `float: left` to the figure. The article text wraps on its right. Add `margin-right: 24px` so the words do not touch the image; in the newspaper layout, these rules apply at a viewport width of at least 955px. section 4.5.2
Listing 4.14 Floating the figure
@media (min-width: 955px) {
...
figure {
float: left;
margin-right: 24px;
}
}
See the media query, left float, and right margin together in the figure’s CSS rule. section 4.5.2
Make a drop cap
Style the first letter of the first paragraph with `p:first-of-type::first-letter`. Set `float: left` so the following lines flow beside the enlarged letter. Adjust its `line-height` to make that flow fit more naturally. section 7.1.3
Listing 7.4 Styling and positioning the first letter of the first paragraph
@import url(
'https:/ /fonts.googleapis.com/css2?
family=Passions+Conflict&display=swap' #1
);
p:first-of-type::first-letter { #2
font-size: 6em; #2
float: left; #2
line-height: .5; #2
font-family: 'Passions Conflict', cursive; #2
} #2
See how the first-letter selector combines the float with font size, font family, and line height. section 7.1.3
A floated rectangular compass image initially makes text follow a rectangular path. For a different contour, combine float with CSS shapes through `shape-outside`; adjacent inline content can then follow the shape. section 7.3 section 7.5
