Float property
The CSS float property positions an element toward one side of its containing block and allows surrounding content to flow around it.
Web Design Playground
A CSS property that takes an element out of normal document flow and places it to the left or right so surrounding content can wrap around it.
- How it is used
- Breaks elements out of default flow for wrapping effects, side-by-side items, and float-based layouts.
- How deep it goes
- Explains values, wrapping, margins, clearing, container collapse, and responsive removal, while deferring modern layout methods to Flexbox and CSS Grid.
- Examples
- Uses a floated table of contents, drop cap, pull quote, navigation items, article-and-aside columns, and responsive stacked columns.
- What you can do after
- Apply it via CSS to create wrapping effects and side-by-side layouts, then clear floats and prevent collapsing parents.
Tiny CSS Projects
The CSS float property positions an element to the left or right of its containing block so surrounding inline content can flow around it.
- How it is used
- Positions images, captions, and drop caps within running text so nearby content wraps around them.
- How deep it goes
- Defines left, right, and none, then works through figure and drop-cap CSS; extends wrapping with CSS shapes.
- Examples
- Shows a floated newspaper figure, a first-letter drop cap, and text wrapping around a compass image.
- What you can do after
- Apply it via CSS to wrap text around a figure or create a drop cap, adjusting spacing where needed.
Web Design Playground, Second Edition
The CSS float property positions an element toward the left or right side of its containing block and allows surrounding content to flow around it.
- How it is used
- Uses floats to interrupt normal flow, wrap content, create drop caps, and create pull quotes.
- How deep it goes
- Explains syntax, wrapping, margins, clearing, inline behavior, parent collapse, and decorative examples, but stops short of positioning internals.
- Examples
- Demonstrates a floated table of contents, multiple floated columns, a self-clearing container, a drop cap, and a pull quote.
- What you can do after
- Apply floats in CSS to wrap content, clear unwanted wrapping, prevent container collapse, and style decorative text treatments.
Read how Web Design Playground, Second Edition explains float property →
CSS in Depth, Second Edition
A CSS layout mechanism that removes an element from normal flow and positions it toward one side so surrounding content can flow around it.
- How it is used
- Uses floats for newspaper-like layouts in which inline text wraps beside images or other elements.
- How deep it goes
- Explains flow removal, edge placement, source-order dependence, stacking, and container overflow, then stops short of broader float mechanics.
- Examples
- Demonstrates a floated eagle image beside Emily Dickinson’s poem and shows multiple floats, clipping, and shaped text wrapping.
- What you can do after
- Apply it via CSS to place an image beside text and control whether subsequent content continues wrapping around the float.
Read how CSS in Depth, Second Edition explains float property →
Build a Website with ChatGPT
The CSS float property positions an element toward the left or right side of its containing block and allows surrounding content to flow around it.
- How it is used
- Uses the float value to customize a page header, especially the position of its logo.
- How deep it goes
- Demonstrates changing a float value in CSS but does not explain floating layout internals.
- Examples
- Uses a header logo whose float value changes from its existing setting to right.
- What you can do after
- Apply it via CSS to reposition a header logo and coordinate nearby text alignment.
Read how Build a Website with ChatGPT explains float property →
Related concepts
- shape-outsideused by · The CSS shape-outside property defines the geometric shape around which inline content flows beside a floated element.
- normal flowcontrasts with · Normal flow is the browser’s ordinary layout process, arranging elements according to document order and their formatting behavior without out-of-flow positioning.
- gridalternative to · A grid is a regular arrangement of positions or cells organized by rows and columns or by fixed neighboring relationships.
- CSS Shapesused by · CSS Shapes is a CSS feature for defining geometric shapes that control how inline content flows around an element.
These guides are generated from the text of Manning books by Manning's knowledge graph and link to the sections they draw on. The full books are available on liveBook and at manning.com.