Doubt about overflow

HTML-CSS
1

Hello,

I was looking some float and overflow examples in www.w3schools.com but now I am confused.

The following link is for the example where I have doubts:

Overflow and float

I understand that the “overflow” property determines what to do with “the excess part” of something, for example, to hide or to put a scrollbar. In the example, if I erase the “overflow” property, then the background color becomes white. Why is that? I am getting confused of how it works. What was the overflow supposed to be hiding there? Why can’t the “ul” have a background color without the “overflow:hidden”?

I appreciate any help.

2

This could be becasue of float.

try this sample code:

<div style="outline:1px solid red">
<span style="width:1in;height:1in;background-color:green;float:right">I'm float</span>
<p>some text</p>
</div>

Browser just place the floated item either at the left or right. by default the floated advance(width and height) does not affect the parent advance. So it simply could go after parent boundary.

Now when you ask the parent(either div above, or ul in link sample code ) for overflow: hidden;, it’s asking the browser try to apply advance for the element, becasue we don’t want to draw any scroll.

Now becasue of that overflow: hidden;, the advance of floated objects are calculated(affects) the parent advance. So this is becasue you see the gray background.

Keep going on great work, happy programming.

1 Like
3

To better understand why it became white, lets add a border around the ul property so we can see what’s going on.
border: 1px solid red;

overflow1.png694×226 15.9 KB

As you can see, the ul element has 0px height. that red border we applied on our ul tag just shows up as a line. But the text (Home, News, Contact, About) is still there… just not obvious since it’s white text on white background.

Problem is the ul tag has collapsed without any height.

Personally, I would use a height property here, instead of doing overflow: hidden.
I think the intent is clearer.

Like so:

overflow2.png781×240 16.5 KB

2 Likes
4

About the floats…

Normally, an li list tag will list all the items vertically, top to bottom.

But since this is a horizontal navigation menu, they want to show the different list items side-by-side.

So a float: left was used for the li tag.

li {
    float: left;
}

Without the float:left property, the li tags will display like this: