Overflow: hidden in CSS

Question

Can anyone explain me what this overflow:hidden actually does?. I am not able to understand this concept though reading many CSS tutorials. I have two floats one on right and other left, why should i apply overflow:hidden to my header?.

I am getting confused on this property.

because of browser's strangeness, the height of the container element will not be right and won't reach till the END of the last floated element, so in order to "trick" the container element to be the right height, to encapsulate all it's floated children, it needs to have `overflow:hidden` — vsync, Oct 20 '13 at 09:35
@vsync: That's not "browser's strangeness". It's completely intentional behavior. — BoltClock, Oct 20 '13 at 09:35
with my 8 years experience with CSS, I find it very strange, and illogical behaviour. — vsync, Oct 20 '13 at 09:38
@vsync: An element is taken out of normal flow when it's floated. It's completely logical. — BoltClock, Oct 20 '13 at 09:40
in real life, 99% of the time you'll need to clear it and fix the height of the parent, so in reality it makes no sense. — vsync, Oct 20 '13 at 10:24

score 3 · Accepted Answer · 2017-09-16T13:42:44.873

overflow: hidden on a container simply hides any content that flows outside of the box, as demonstrated beautifully by the following diagram (courtesy of Chris Coyier/CSS-Tricks):

You might be using overflow: hidden as a kind of clearfix in this case, which is just a way to get a parent container to expand to the height of its floated children (as floated elements are taken out of the normal page flow). The difference between using overflow: hidden and overflow: visible on containers with floating children can be seen in the following demo.

score 1 · Answer 2 · answered Oct 20 '13 at 09:35

1

If the content of your element is bigger than the container, it will often change the size of the container. overflow:hidden just tells it to hide whatever content doesn't fit in the container, so the container stays the same size.

answered Oct 20 '13 at 09:35

Dan Goodspeed

3,484
4
26
35

score 1 · Answer 3 · answered Oct 20 '13 at 09:38

There are 5 values that overflow can have. They are visible, hidden, scroll, auto and inherit. By using overflow:hidden, you are forcing the content to fit into the specified dimensions without using scrollbars. Thus, only the content that fits within the dimensions will be visible, and the rest is hidden.

Perhaps this demo will help you visually see the difference: http://www.w3schools.com/cssref/tryit.asp?filename=trycss_overflow

Sources: http://www.w3schools.com/cssref/pr_pos_overflow.asp

score 1 · Answer 4 · edited May 23 '17 at 12:10

overflow: hidden was never intended to directly affect floats — as shown by the other answers here its main purpose is to control content overflow, in other words doing exactly what it says on the tin — but it has an obscure side effect of causing a container to produce its own block formatting context. When this happens, the container must expand to contain its floats, even though floats are usually taken out of normal flow. This isn't usually mentioned in CSS tutorials since it's not exactly an intended purpose of the overflow property.

Note that this is not the same as clearing floats, since you're modifying the container itself and not introducing some clearing element (as is typical of a clearfix).

See also: Why does overflow: hidden have the unexpected side-effect of growing in height to contain floated elements?

Overflow: hidden in CSS

4 Answers4