overflow
Generally, the content of a block box is confined to the content edges of the box. In certain cases, a box may overflow, meaning its content lies partly or entirely outside of the box, e.g.:
- A long line that cannot be broken (i.e. a URL), causing the line box to be wider than the block box.
- A block-level box is too wide for the containing block.
- An element’s height exceeds an explicit height assigned to the containing block.
- A descendant box is positioned absolutely, partly outside the box.
- A descendant box has negative margins, causing it to be positioned partly outside the box.
- The ‘text-indent’ property causes an inline box to hang off either the left or right edge of the block box.
Whenever overflow occurs, the ‘overflow’ property specifies whether a box is clipped to its padding edge, and if so, whether a scrolling mechanism is provided to access any clipped out content.
The region of the pink box that would normally overlap the following box in the flow (due to position:relative;top:10px) is clipped.
Styling the aqua box with display:inline would reveal the pink box.
IE 6 treats height as min-height and width as min-width, hence this browser does not clip nested boxes (although the ancestor is styled with overflow) unless that ancestor has a explicit width or height.
