I've found some CSS templates where some classes have the overflow:hidden property, but no size defined. If I recall correctly, block elements stretch to fit their content unless otherwise specified. Since this is not the case, I feel that putting the overflow:hidden is pointless and I can delete it without hesitation. Is this right or am I missing something?
Add a comment
|
4 Answers
While that's the main purpose of the overflow property, it's not the only effect it has on rendering. The other major effect it has is that setting overflow to anything other than visible (the default) causes a block box to establish its own block formatting context.
This is mainly used to contain floats without the need for a clearfix; however that isn't the only effect of having a new BFC; there are a number of other corner cases that are better described elsewhere in the spec. Also see this lengthy write-up on the reasoning for this behavior (which, oddly enough, has very little to do with containing floats; that actually ends up being nothing more than a side effect).
So if you remove that overflow declaration, you may break float layouts, among other things. I suggest avoiding doing so unless it's absolutely necessary or you're sure it won't affect the layout.
1 Comment
Variax
Good answer. In my case there's no child floating element, so I guess it would be safe to remove the declaration. However, I'll let it be just in case I forget why it was there in the first place.
If there are floating children inside that div, then overflow: hidden is probably there to contain them.
overflow: hidden creates a new block formatting context, and elements that create new block formatting contexts contain floats.
Comments
It may depend. if your div contains some floated elements you could use
div {
height: auto;
overflow : hidden;
}
as a workaround for the clearing. So I wouldn't delete that rule without seeing the effect on the layout
answered Sep 27, 2012 at 12:32
Fabrizio Calderan
124k26 gold badges171 silver badges183 bronze badges
Comments
overflow:hidden can come in handy if you have a child element with a width specified which is greater than the container's max allowed width. Otherwise it will stretch the container.
A common use of this is when displaying a carousel, with floated child elements. The elements need to appear inline, but hidden, so that they can come into vision when the left CSS property is changed.
4 Comments
BoltClock
This was mentioned in the question. The issue is that the stylesheet doesn't have a specified width (or height).
Curtis
@BoltClock Perhaps you have misread my answer. I'm referring to a child element, not the actual elements width
BoltClock
Oops, yeah, that is different.
Curtis
@BoltClock I've updated my answer to make this is a bit clearer