标记和 css：为什么在实际内容之前有这么多 div？

Question

所以，我练习了HTML/CSS，并想建立一个简单的子标题，与http://www.phppennyauctiondemo.com/ 上看到的完全相同（div id="sub-header"，带有类别的部分）。

我是这样做的：

<div id="sub-header">
  <div class="sub-mid">
  <ul id="nav">
    <li><a href="">All items (1)</a></li>
    <li><a href="">Shops and Coupons</a></li>
    <li><a href="">Kids toys</a></li>
    &nbsp;
  </ul>
  </div>
</div>

#sub-header
{
    background: url("/images/front_layout/header_sub_bg.gif") repeat-x;
    height: 31px;
    border-top:1px solid #708044;
    border-bottom:1px solid #d4dde1;
}

#sub-header .sub-mid
{
    width: 950px;
    margin: 0 auto;
}
#nav
{
    padding: 4px 0;
}

#nav li
{
    padding: 0 3px;
    border-right: 1px solid #B1C0C5;
    float: left;
}
#nav li a
{
    padding: 3px 8px;
    color: #607E87;
    text-shadow: 1px 1px 0 #FFFFFF;
    height:15px;
    display: block;
}

这看起来与他们的子标题（在 Firefox 中）完全相同。

但是当我查看他们的标记和 CSS 时，我在实际内容之前看到了更多的 div，然后我使用了更多的 CSS：

<div id="sub-header" class="clearfix">

            <div  align="center">

                <div style="width:950px; text-align:left;">

                        <div id="select-categories">

        <ul id="nav">  UL after 4 divs... </ul>

由于我不是专业的 Web 开发人员，并且我假设该页面是由专业人员构建的 - 我的问题是为什么他们使用了如此多的 div 而没有做任何事情？

我对 CSS/HTML 有什么不了解的地方吗？

Answer 1

使用这么多 div 是一种我们称之为“divitis”的疾病。它来自一种病态，让开发人员忘记他可以经常使用 ul、p 等元素，因为它们用于定位和样式化，而无需将它们包装在 div 中。通常，您可以删除这些额外的 div 元素而不会造成任何伤害，除非可能需要重写 CSS 来解决这个问题。

还没有找到疫苗，只有时间和经验有帮助。