w3schools example for overflow:hidden

Question

I already know about overflow:hidden that It hide text when text can't be filled in border. but I don't know why the following coding need it.

This code creates navigation bar but if I erase overflow:hidden, It doesn't work. I want to know about this happening. hidden works for what? please help.

ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  overflow: hidden;
  background-color: #333;
}
li {
  float: left;
}
li a {
  display: block;
  color: white;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
}
li a:hover {
  background-color: #111;
}

<ul>
  <li><a class="active" href="#home">Home</a></li>
  <li><a href="#news">News</a></li>
  <li><a href="#contact">Contact</a></li>
  <li><a href="#about">About</a></li>
</ul>

http://stackoverflow.com/questions/16041229/css-overflowhidden-with-floats — Mattia Nocerino, Nov 11 '16 at 09:59

score 1 · Answer 1 · answered Nov 11 '16 at 10:08

1

That is because you are not clearing float left.Please remove overflow:hidden; from code and add

ul:after{
         Content:"";
         display:block;
         clear:both;
}

This will work properly.

answered Nov 11 '16 at 10:08

Mr.Pandya

1,899
1
13
24

score 0 · Accepted Answer · answered Nov 11 '16 at 10:39

its about float left when child has this property then parent leave child's height property so then ul tag invisible becouse that have no height so us like this

ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  background-color: #333;
}
li {
  display: inline-block;
}
li a {
  display: block;
  color: white;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
}
li a:hover {
  background-color: #111;
}

<ul>
  <li><a class="active" href="#home">Home</a></li>
  <li><a href="#news">News</a></li>
  <li><a href="#contact">Contact</a></li>
  <li><a href="#about">About</a></li>
</ul>

Hope this helps you THANKS

Federico · Answer 3 · 2016-11-11T10:05:30.210

-1

Actually it works well if you give ul a height.
Here the overflow is well explained: W3C

ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  background-color: #333;
  height:46px;
}
li {
  float: left;
}
li a {
  display: block;
  color: white;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
}
li a:hover {
  background-color: #111;
}

<ul>
  <li><a class="active" href="#home">Home</a></li>
  <li><a href="#news">News</a></li>
  <li><a href="#contact">Contact</a></li>
  <li><a href="#about">About</a></li>
</ul>

edited Nov 11 '16 at 10:05

answered Nov 11 '16 at 10:02

Federico

1,392
1
17
40

Don't give ul a height, just clear the floats with a proper tecnique, or just use inline block elements for
's or flexbox

Mattia Nocerino

Nov 11 '16 at 10:05

w3schools example for overflow:hidden

3 Answers3