带有CSS的HTML不起作用

我遇到了一些奇怪的问题。我正在尝试创建一个黑匣子，它将成为视频和一些文本的背景，但在我输入CSS后，黑匣子不会显示。不仅如此，我还尝试将.videoBlock div作为注释。在这篇文章中，我发现.dwBlock div后面的任何代码似乎都不能与CSS一起工作。例如，在我将.videoBlock div标记为注释后，页脚消失了。如果您有任何帮助，我们将不胜感激！谢谢！！这是我的HTML：

<div class="wrapOverall">
  <div class="header">
    <div class="navMain">
        <ul>
          <li><a href="#">Home</a></li>
          <li><a href="#">Contact</a></li>
          <li><a href="#">About</a></li>            
        </ul>
    </div><!--End of navMain-->
  </div><!--End of header-->
  <div class="wrapBlocks">
    <div class="psBlock"></div><!--End of psBlock-->
    <div class="dwBlock"></div><!--End of dwBlock-->
  </div><!--End of Overall block wrap-->
  <div id="videoblock"></div><!--End of videoBlock-->
  <div class="footer">
    <div class="social"></div><!--End of social-->
  </div><!--End of footer-->
</div><!--End of wrapOverall-->

---

float元素正在产生问题，请尝试用两个元素都清晰地表示它们的基础

  <div class="wrapBlocks">
    <div class="psBlock"></div><!--End of psBlock-->
    <div class="dwBlock"></div><!--End of dwBlock-->
    <div style='clear:both'></div> <!-- above two float element is causing this issue -->  
  </div>

---

问题出在CSS中，而不是html代码中，您使用的是id=videoblock，但在CSS中，您被引用为一个类。videoblock，change。通过在你的CSS像视频块和工作良好

#videoblock {
width: 993px;
height: 348px;
background-color:#000;
}

---

你能看演示吗：

你能用你的.videoBlock div发布代码吗？@Mouli代码块格式不正确，它就在那里。你确定吗？是的，我确定。。。您可以计算开始div和结束div的数量。您共享的示例与开始div的数量和结束div的数量不匹配…似乎您已对其进行了编辑。

#videoblock {
width: 993px;
height: 348px;
background-color:#000;
}