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.:

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).

Values of the overflow property have the following meanings:
The content may be rendered outside the block box.
The content is clipped and no scrolling user interface is provided.
The content is clipped and scroll bars are displayed whether or not any of the content of the box is clipped.
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).

Try These

The three boxes are nested inside each other.

Watch This


Check This

<div id="aqua">aqua     <div id="yellow">yellow         <div id="pink">pink</div>     </div> </div>

Edit This

Use shift + enter to create new lines (even in Safari and Chrome).