The CSS float property nudges an element out of the usual top-to-bottom page flow and sends it as far left or right as it can go inside its parent. The fun part: nearby content flows around it, rather like text wrapping around a photo in a magazine. section 8.2 section 8.23
Start with the three values: `float: left` places the element on the left, `float: right` places it on the right, and `float: none` leaves it un-floated. Add a margin so the wrapping content has breathing room. section 8.2
Float a table of contents
A table of contents can sit at the right edge while quotations and other content wrap beside it: `.toc {` ` float: right;` ` margin-left: 2em;` ` margin-bottom: 2em;` `}` A float can be applied to an inline element such as `span`, too. The browser turns that inline element into a block-level element before floating it; give it a width so the browser knows how much room to reserve. section 8.3 section 8.4
Floats are handy for small layout and typographic effects:
- Create a drop cap by selecting a paragraph’s first letter with `::first-letter`, floating it left, then adjusting its size, line height, and padding. section 8.9
- Set off a pull quote by placing the excerpt in an element, usually floating it right, and styling its margins, type, and borders. section 8.12 section 8.13
- Place items side by side for navigation, headers, or columns by floating multiple elements, usually left, and assigning widths where needed. section 11.12 section 11.18
A float keeps affecting later content until something clears it. Use `clear: left`, `clear: right`, or `clear: both` on the element that should begin after the float. For example, a heading with `clear: right` starts below a right-floated table of contents instead of wrapping alongside it. section 8.5
Watch for container collapse: when a parent contains only floated children, those children are out of normal flow, so the parent can appear to have no height. A common repair is a self-clearing `::after` pseudo-element that inserts an empty block and clears both sides. section 8.6
.first-paragraph::first-letter { #1
float: left; #2
padding-top: .1em; #3
padding-right: .1em; #3
color: darkred; #3
font-size: 5em; #3
line-height: .6em; #3
}
Try this compact drop-cap rule: it floats the opening letter left, then uses padding, font size, and line height to let paragraph text nestle around it. section 8.10
For a narrow screen, remove floated columns with `float: none` and give them full width so they stack again. Float-based layouts remain useful to understand, but Flexbox and CSS Grid are presented as the more straightforward direction for layout. section 13.13 section 11.12
