Details about CSS overflow attributes

Retrieves or sets how to manage content when the content of an object exceeds its specified height and width.
The default value of all objects is visible, except that the default value of textarea object and body object is auto. Set the textarea object. This property value is hidden and Its scroll bar is hidden.

The overflow attribute has four values:

Visible(Default ),Hidden,Scroll, AndAuto.

There are also two sister attributes of overflow-y and overflow-X, which are rarely used.

1. 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 attribute to visible unless you want to overwrite the value it is set elsewhere.

The important thing to remember here is that although the content outside the box is visible, the content does not affect the page workflow. For example:

In general, you do not need to set a fixed height for the text box for the content, so that this will not happen.

2. Hidden

The opposite value of the default value visible isHidden. It hides all content beyond the box.

This method is applicable to dynamic content and may be caused by content overflow.Some layout problemsIt is indeed very useful. However, remember that the content hidden using this method will not be completely visible (unless you check the content ).Source code). For example, some users set the default font of their browsers to be larger than you expected. You will push some text out of the box and hide it completely ......

3. Scroll

Setting the overflow value of a box to scroll will hide the content rendered outside the box, but it will provide a scroll bar to scroll inside the box to view the remaining content.

It is worth noting that using scroll will generate two horizontal and vertical scroll bars at the same time, even if the content only needs one of them.

4. Auto

The auto value of overflow is similar to scroll. The only solution is that the scroll bar may occur when you do not need it.

Clear floating

A more popular use of setting overflow is to clear floating. Setting overflow does not clear the float on this element.Clear yourself(Self-clear ). This means that overflow (AutoOrHidden), It will expand to the size it needs to enclose the floating child elements in it (instead of stacked (collapsing), assuming that the height is not defined. Like this:

Here are more details about floatingArticleEverything about floating.

Cross-browser troubles

Like many things in CSS, overflow has a lot of cross-browser flaws. For example:

Is the scroll bar inside or outside the box?

Firefox places it outside the box, While IE places it inside. I think only IE is right (it should be in it ).

See the obvious difference.

Bug in IE 8 extension box

IE8 has a lot of interesting new bugs, including some very serious hidden in the web page. Here is more about the overflow bug of IE8.

Damage floating Layout

IE 6, 7, and 8 will distort the default overflow visible value and horizontally expand a box to match the content (ratio ). This is very painful to use the floating column layout structure, and a single extended column can squeeze other columns and make the layout messy!

Can I use CSS to control the scroll bar?

IE used to allow this in older versions, but then it converges. For example, many form elements cannot be controlled by CSS in the scroll bar. I have no specific idea about whether it is a good thing, but I can say that it is ugly and cheesy to use a scroll bar on all the content of the website. If you need a beautifying scroll bar, you may need to look for JavaScript to simulate it.

IE skills

IE always displays a vertical scroll bar no matter whether it is needed or not, which has some effect on preventing horizontal beating, but it is not always desirable. To remove it from IE, you can set overflow to auto in the body element.

(Demo: You can view the demo page of this Article .)