怎么理解这个超简单的Menu小Demo？

谢谢大大们！我是个CSS新人，想问一下如何理解如下这个超简单Menu Demo中的某些行？

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Menu Demo 2</title>

    <style media="screen">
      body {
        font-family: verdana;
      }

      ul {
        list-style-type: none;
        margin: 0px;
        padding: 0px;
        overflow: hidden; /*1.Why删掉此行后Menu消失？*/
        background-color: #666;
      }

      ul li {
        float: left; /*2.Why删掉此行后menu变竖直？*/
      }

      ul li a {
        display: inline-block; /*3.Why删掉此行后Menu变小,padding上下不管用了？*/
        color: white;
        padding: 14px 16px;
        text-decoration: none;
        text-align: center;
      }

      ul li a:hover {
        background-color: #111;
      }

    </style>

  </head>
  <body>
    <h2>Menu Demo 2:</h2>
    <ul>
      <li><a href="...">HTML</a></li>
      <li><a href="...">CSS</a></li>
      <li><a href="...">JavaScript</a></li>
      <li><a href="...">Contact</a></li>
    </ul>
  </body>
</html>

1、由于li是浮动布局，ul非浮动布局，如果不加overflow无法撑开ul的高度，这是作用之一；其二，当有更多层次的菜单加入时也可以起到隐藏作用。如果仅仅考虑撑开ul高度问题，也可以把此句删除，增加float:left;width:100%;也可以实现最终效果。

2、li是块级元素，独占一行，所以，要使用浮动，使之拥有行内元素的特点——同行内显示。

3、a是行内元素，无法定高定宽，但是在此例中，又不想使其失去行内元素的特性，又想规定其宽高，那么，只有让其保持行内元素的特性的同时又要有块级元素的特性，于是，就使用了inline-block。

没有认真专研过HTML标签的知识，所以，可能在解释a元素时用词不够专业，解释不够精准，还有待商榷，还望见谅，请各位网友指正。

问题过于基础，建议先自行思考而后决定是否提问。

【热门文章】