CSS Overflow Properties

Original link: http://www.qianduan.net/css-overflow-property.html

According to the CSS box model concept, each element in the page is a rectangular box. The size, position, and behavior of these boxes can be controlled using CSS. For behavior, I mean how it is handled when content inside and outside the box changes. For example, if you do not set the height of a box, the height of the box will grow according to the need for it to accommodate the content. But what happens when you assign a height or width to a box and the content inside is out of bounds? This is the time to add the overflow property of the CSS, which allows you to set how to handle it in that case.

The overflow property has four values:visible (default), hidden, scroll, and auto. There are also two overflow of sister attributes Overflow-y and overflow-x, which are rarely used.

Let's take a look at each of these values and discuss common usage and techniques.

Visible

If you do not set the overflow property, the default overflow property value is visible. So generally, there is no reason to specifically set the overflow property 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 workflow of the page. Like what:

In general, you don't have to set a fixed height for a box that contains text, so you don't have to.

Hidden

The opposite value of the default value visible is hidden. It hides all the content that goes beyond the box.

This is really useful for coping with the use of dynamic content and possibly causing some layout problems due to content overflow. However, keep in mind that what you hide with this method will not be completely visible (unless you are viewing the source code). For example, if some users set their browser's default font to be larger than you expected, you would push some text out of the box and hide it completely ...

Scroll

Setting a box with a overflow value of scroll will hide the rendering outside of the box, but it will provide a scrollbar to scroll inside the box to see what remains.

It is worth noting that using scroll will produce both horizontal and vertical two scroll bars, even if the content only needs one.

Auto

The auto value of overflow is much like scroll, and the only solution is to have a scrollbar problem when you don't need it.

Clear floating

One of the more popular uses of setting up overflow is, to say the odd, to clear the float. Setting overflow does not clear the float on that element, it clears itself (self-clear). This means that an element that has the overflow (auto or hidden) applied will expand to the size it needs to surround the floating child elements inside it (instead of stacking up (collapsing)), assuming the height is undefined. Just like this:

For this issue, after testing,IE6 automatically expands the height of the parent layer element, and the IE8 and FF, such as the browser plus Overflow:auto, can clear the float. --God Fly

Here's more about floating detail articles about floating everything.

Cross-browser annoyance

Like a lot of stuff in CSS, overflow has a lot of cross-browser weird things. such as these:

is the scroll bar inside or outside the box?

Firefox puts it outside the box, and IE puts it inside. I think only IE is right (it should be inside).

Look clearly at this obvious difference.

IE 8 Bug of Expansion box

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

Breaking floating layouts

IE 6, 7, and 8 will distort the default overflow visible values and will extend the horizontal one box to match content (compared to slices). This is painful for structures that use floating column layouts, and a single extended column can squeeze other columns down and mess up the layout!

As a matter of fact, I found out in my verification that only IE6 would be present, and IE7, IE8 and other browsers would behave the same. If you have encountered this situation when using IE7 or IE8, please let me know, thank you! --God Fly

Can scroll bars be controlled with CSS?

IE used to allow this in older versions, but then it converged. For example, many form elements, scroll bars are not allowed to use CSS control. I do not have any specific opinion on whether it is a good thing, but I can say that the use of scroll bars on all content of the site is ugly and tacky. If you need a landscaping scroll bar, you may need to look for JavaScript to emulate.

IE Tips

IE always displays a vertical scroll bar, whether or not it is needed, which is useful for preventing horizontal beats, but not always desirable. To remove it in IE, you can set overflow to auto in the BODY element. PS: This situation is also less found, but in the body style to add Overflow:auto method, it is recommended to consider the use of--God fly

Demonstrate

This page can be viewed in the demo page of this article.

(GO) CSS Overflow properties