four values for the overflow property: visible (default), hidden, scroll, and auto.
Generally, you shouldn’t be setting static heights on boxes with web text in them anyway, so it shouldn’t come up.
literally hides any content that extends beyond the box.
This is particularly useful in use with dynamic content and the possibility of an overflow causing serious layout problems. However, bear in mind that content that is hidden in this way is utterly inaccessible (short of viewing the source).
Setting the overflow value of a box to scroll will hide the content from rendering outside the box, but will offer scrollbars to scroll the interior of the box to view the content.
Of note with this value is that you get BOTH horizontal and vertical scrollbars no matter what, even if the content requires only one or the other.
Auto overflow is very similar to the scroll value, only it solves the problem of getting scrollbars when you don’t need them.
One more popular uses of setting overflow, strangely enough, is float clearing. Setting overflow doesn’t clear the float at the element, it self-clears. This means that the element with overflow applied (auto or hidden), will extend as large as it needs to encompass child elements inside that are floated (instead of collapsing), assuming that the height isn’t declared. Like this: