The CSS float property interrupts the usual top-to-bottom flow. Set it to left or right, and the browser moves the element as far toward that side of its containing block as possible while nearby content flows around it. A little margin keeps the neighbors from crowding in. section 8.2
element {
float: left|right|none;
}
The basic syntax is pleasantly small: choose left, right, or none. section 8.2
Keep these float behaviors in your toolbox:
- Add margin around a floated element to create breathing room for wrapping content. section 8.2
- Clear an element with left, right, or both when it should render after the corresponding floated content. section 8.3
- Give a floated inline element a width; floating also turns it into a block-level element. section 8.3
- Watch for a collapsed parent when every child is floated; a self-clearing parent can clear both sides and preserve the container. section 8.4
- Float consecutive elements to place them beside one another when space allows, or below one another when it does not. section 8.4
A float with some flair
Floats can do more than make text squeeze around a table of contents. Float a paragraph’s ::first-letter to create a drop cap, or float a span to the right and style it as a pull quote. Font size, color, borders, padding, and margins provide the theatrical lighting. section 8.5 section 8.6
