CSS: floating and surrounding common area (background/border visualisation) or why "overflow: hidden"?

Question

I make simple http://jsfiddle.net/6KzXw/ with CSS:

.container {
  width: 50%;
  margin: 0 auto;
  padding: 2px;
  background: red;
}
.left {
  float: left;
  background: yellow;
}
.right {
  float: right;
  background: yellow;
}

and HTML:

<div class="container">
  <div class="left">To the left.</div>
  <div class="right">To the right.</div>
</div>

I wondering why area of container isn't red....

After search I found solution with overflow: hidden but official docs about fix: http://www.w3.org/TR/CSS21/visufx.html make me cry when I try to understand how it work...

Can any explain why overflow: hidden is fix for surrounding problem with standard in mind?

score 1 · Answer 1 · answered Jul 25 '14 at 17:03

1

you need to provide a height to the div as if you float the contents, the contents are removed from the flow of the page. essentially the div sees no children inside it as the children are floating.

i added a height to the div height: 20px FIDDLE

answered Jul 25 '14 at 17:03

Anubhav

7,138
5
21
33

this is the correct answer. you need both dimensions. – Frankie Loscavio Jul 25 '14 at 17:04

score 1 · Answer 2 · answered Jul 25 '14 at 17:06

When you apply the 'hidden' property to an element, any floats within it will take up space. So if you have a container that only contains floated elements, that container will act like it's empty. By setting 'overflow' to 'hidden' we force that container to account for those floats.

Another solution to this is to add a "clearfix" element below the floats. It might look something like this:

<div class="container">
    <div class="left">To the left.</div>
    <div class="right">To the right.</div>
    <div class="clearfix"></div>
</div>

And the CSS will be something like this:

.clearfix {
    clear: both;
}

Personally, I prefer setting overflow to hidden (if possible) but there are many clearfix solutions out there.

http://nicolasgallagher.com/micro-clearfix-hack/

http://css-tricks.com/snippets/css/clear-fix/

http://learnlayout.com/clearfix.html

Edit:

As far as setting a set height. You can do that if you want a set height, but if you want the container to grow or shrink based on the height on the floats, you need to set overflow hidden or use a clearfix.

Hm, `clearfix` works. But it makes new questions )) I deep to read your links. Thanks! +1 — gavenkoa, Jul 25 '14 at 17:09

score 1 · Accepted Answer · edited May 23 '17 at 12:21

1

overflow: hidden causes the container to establish a block formatting context for its contents. Without it, the floats participate in some other formatting context, having been taken out of normal flow, and therefore the floats are not taken into account when calculating the height of the container.

Once you cause the container to establish a formatting context, it will consider the floats, even though the floats are still taken out of the normal flow that is established within its own formatting context. That is stated in another section of the spec. The reason this isn't stated in the section that you link to is because it's a side effect that was never really intended, but made so due to implementation limits. See this answer (and the one that it links to) for an explanation.

edited May 23 '17 at 12:21

Community

1
1

answered Jul 25 '14 at 17:09

BoltClock

700,868
160
1,392
1,356

Thanks. I don't try to read full standard or follow links. It's interesting to know that `overflow: hidden` not indented for such "hack"... +1 – gavenkoa Jul 25 '14 at 17:13
1

@gavenkoa and don't use `overflow: hidden;` to clear floats – Mr. Alien Jul 25 '14 at 17:16
@gavenkoa: Yes, "hack" is how I would describe it as well - which is why I recommend use with caution, if at all. – BoltClock Jul 25 '14 at 17:17
1

@gavenkoa one example of why you shouldn't use them, compare [this](http://jsfiddle.net/6MNap/) vs [this](http://jsfiddle.net/6MNap/1/) – Mr. Alien Jul 25 '14 at 17:20

score -1 · Answer 4 · answered Jul 25 '14 at 17:00

-1

Because the container has a height of 0

answered Jul 25 '14 at 17:00

Lochemage

3,974
11
11

Why `overflow: hidden` change container size? (I am not -1) – gavenkoa Jul 25 '14 at 17:01
1

I don't know for sure, but I think it's because overflow needs some kind of height in order to function correctly. Since you did not supply a definitive height property, overflow must put some type of default height in its place for it to use. The fact that it fixes the height of the div might just be a side effect. – Lochemage Jul 25 '14 at 17:12

CSS: floating and surrounding common area (background/border visualisation) or why "overflow: hidden"?

4 Answers4