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.

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.

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