Overflow of CSS

Guide: Overflow attributes are generally used to hide elements beyond the div range, including four attributes: visible, hidden, scroll, and aotu. Of course, the usage of overflow.It’s not that simple to understand. We need to use overflow in many Web pages. This article introduces the four common attribute values of overflow and their use.

According to the box model of CSS, every element in the page is a rectangular box. The size, location and behavior of these boxes can be controlled by CSS. For behavior, I mean when it changes inside and outside the box, how does it deal with it?

For example, if you don’t set the height of a box, the height of the box will increase depending on what it contains. But what happens when you assign a height or width to a box and the contents go beyond it? This is the time to add the overflow property of CSS.It allows you to set how to handle the situation.

overflowProperty has four values:visible (By default), hidden, scroll, andauto。There are also two sister attributes of overflow, overflow-y and overflow-x, which are rarely used.

Let’s take a look at these values separately and discuss the common usage and skills.

Visible

If you do not set the overflow attribute, the default overflow attribute value is visible. So in general, there’s no reason to specifically set the overflow property to visible unless you want to override the values it’s set elsewhere

 

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

Generally speaking, you don’t have to set a fixed height for the text box in order to avoid this situation.

Hidden

The opposite value of default value visible ishidden。It will hide all the contents away from the box.

This is to cope with the use of dynamic content, and may result from overflowing of content.Some layout problemsIt’s really useful. Nevertheless, keep in mind that the content hidden in this method will be completely invisible (unless you look at the source code). For example, some users set their browser’s default font to be larger than you expected, and you push some text outside the box and hide it completely…

Scroll

Setting the overflow value of a box to scroll will hide what is rendered outside the box, but it will provide a scroll bar to scroll inside the box so you can see what’s left.

It’s worth noting that using scroll produces both horizontal and vertical scroll bars, even if only one of them is needed.

Auto

overflowThe auto value is very scroll-like, and the only thing it solves is the scroll bar problem when you don’t need it.

Scavenging floating

One of the more popular uses of overflow is that it is strange to remove floats. Setting overflow does not remove floats on this element, it willClear yourself(self-clear)。It means that overflow is applied.autoorhidden)The element, which extends to the size it needs to surround the floating child element inside it (instead of collapsing), assumes no height is defined. Just like this:

For this problem, it has been tested.IE6It automatically extends the height of the parent element, and browsers such as IE8 and FF, with overflow: auto, remove the float.

Cross browser troubles

Like many things in CSS, overflow has many strange things across browsers. For example, these:

Is the scroll bar inside or outside the box?

FirefoxPut it outside the box, and IE put it inside. I think only IE is right (it should be in it).