The content of an element might be larger than the dimensions of the box itself. For example given width and height properties did not allow enough room to accommodate the content of the element. CSS overflow property allowing you to specify whether to clip content, render scroll bars or display overflow content of a block-level element.

This property can take one of the following values: visible (default), hidden, scroll, and auto. CSS3 also defines the overflow-x and overflow-y properties which allow for independent control of the vertical and horizontal clipping.

Ex:

p {width: 300px;    Height: 200px;   overflow: scroll; }

Visible:

      The default value. Content is not clipped; it will be rendered outside the element’s box, and may thus overlap other content.

Scroll:

      The overflowing content is clipped, just like hidden, but provides a scrolling mechanism to access the overflowed content.

Hidden:

     Content that overflows the element’s box is clipped and the rest of the content will be      invisible

Auto:

      If content overflows the element’s box it will automatically provides the scrollbars to see the rest of the content, otherwise scrollbar will not appear.