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.
overflow specifies whether content of a block-level element is clipped when it overflows the element’s box. It affects the clipping of all of the element’s content except any descendant elements (and their respective content and descendants) whose containing block is the viewport or an ancestor of the element. For example, absolutely positioned nested boxes are not always clipped by the overflow property on their ancestors. This is when the ancestor (or ancestor within the ancestor) does not establish a positioning context (see demo page).
overflow property have the following meanings:
- visible:
- The content may be rendered outside the block box.
- hidden:
- The content is clipped and no scrolling user interface is provided.
- scroll:
- The content is clipped and scroll bars are displayed whether or not any of the content of the box is clipped.
- auto:
- The behavior of the ‘auto’ value is user agent-dependent, but should cause a scrolling mechanism to be provided for overflowing boxes.
In this section, all three boxes are nested inside each other.
When the used value of overflow is not visible, the box establishes a new block formatting context.
In IE 6, overflow never establishes a block formatting context (but hasLayout does).
