According to the CSS box model concept, every element on the page is a rectangular box. The size, position, and behavior of these boxes can all be controlled using CSS. By behavior, I mean how it handles when the contents inside and outside the box change. For example, if you don't set the height of a box, the height of the box will grow as needed to accommodate its content. But what happens when you specify a height or width for a box and the content inside exceeds it? This is the time to add the CSS overflow property, which allows you to specify how to handle this situation.
The overflow property has four values: visible (default), hidden, scroll, and auto . There are also two sister properties of overflow, overflow-y and overflow-x, which are rarely used.
Let's look at each of these values and discuss common usage and techniques.
Visible
If you do not set the overflow attribute, the default overflow attribute value is visible. So in general, there is no reason to specifically set the overflow property to visible unless you want to override the value it is set to elsewhere.
The important thing to remember here is that although the content outside the box is visible, the content does not affect the workflow of the page. for example:
Generally speaking, you at least don't need to set a fixed height for boxes whose content is text, so you won't encounter this situation.
Hidden
The opposite value of the default value visible is hidden. It will hide everything outside the box.
This is really useful for dealing with dynamic content that may cause some layout problems due to content overflow. However, please remember that content hidden using this method will not be visible at all (unless you look at the source code). For example, some users set their browser's default font to be larger than you expected. You will push some text outside the box and hide it completely...