Tony Stark Tony Stark - 1 year ago 95
CSS Question

background color disappear when I delete overflow: hidden property from li{}

I'm new to css and is trying a simple list layout, when I delete the

li {}
, the background color simply disappears. Because I'm new to css, I could be able to figure out why this is happening. Could someone please help me out? Thanks in advance for any help!

<!DOCTYPE html>

ol {
list-style-type: none;
margin: 0;
padding: 0;
background-color: green;
overflow: hidden;

li {
float: left

display: inline-block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;

li:hover {
background-color: red;


<li><a class="active" href="#home">Home</a></li>
<li><a href="#iPhone">iPhone</a></li>
<li><a href="#iPad">iPad</a></li>

Answer Source

Whenever you are using float, keep in mind that you have to use clear:both. The reason why we use clear:both is that float property will break the flow of html element and will push them according to value(left,right), in your case you have used float:left means all li will be in one line and if space will not covered then it will create blank space issue and to remove that blank space we use clear:both so any blank space which is left will be covered by using clear:both.

See here I have used div to remove blank space.

For more detail you can read here and for detailed information see here and here

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download