Css HTML5样板文件的Clearfix类未放置在包含元素上

stinsonandassociates.com网站在其移动导航菜单上使用了clearfix（小屏幕宽度）。它不起作用，但我很好奇为什么我正在应用的clearfix类（使用HTML5样板）至少没有识别clearfix属性。 桌面导航菜单使用相同的类，并且可以正常工作

这是HTML代码：

<header>
<h1>Bob Stinson</h1>
<a href="/" title="Home Page">
    <img src="img/bobstinson_signature_v2.png" 
         alt="Bob Stinson signature" width="211" height="170" /></a>
</header>  
<nav id="topNav">
    <h2>Top Navigation</h2>
    <ul class="desktop clearfix">
      <li><a href="/" title="Home Page" class="current">Home</a></li>
      <li><a href="psychology" title="Psychology" 
              id="psychologyButton">Psychology</a></li>
      <li><a href="law" title="Law" id="lawButton">Law</a></li>
      <li><a href="about" title="About">About Us</a></li>
    </ul>
</nav>    
<nav class="mobile clearfix">   
    <ul>
      <li><a href="" title="Home Page">Home</a></li>
      <li><a href="psychology" title="PsychologyPage">Psychology</a></li>
      <li><a href="law" title="Law Page">Law</a></li>
      <li><a href="about" title="Law Page">About Us</a></li>
      <li><a href="contact" title="Law Page">Contact</a></li>
      <li><a href="legal" title="Law Page">Legal</a></li>
    </ul>
</nav> 

鲍勃斯丁森
顶部导航

我复制了您的代码，在我看来，右括号解决了您的问题：

首先，所有列表项都在

中

@仅媒体屏幕和（最小宽度：481px）{
/*符合条件的视口的样式调整*/
/*页面布局*/
....
/*关于我们*/
.关于h2{
文本对齐：左对齐；
}
}/*此问题似乎与主题无关，因为它不包含与问题相关的代码可能是，HTML5样板文件
中的
@仅媒体屏幕和（最小宽度：481px）{
的结束括号缺失了吗？clearfix将确保[元素]始终完全包含其浮动子项
您能否澄清/描述为什么
中的导航…
无法识别clearfix属性？这是正确的；媒体查询缺少结束括号。@user1498724:我的答案和/或注释有用吗？您需要更多帮助吗？
@media only screen and (min-width: 481px) {
  /* Style adjustments for viewports that meet the condition */

  /* Page Layout */
  ....
  /* About Us */
  .about h2 {
     text-align: left;
  }
}  /* <--- i added this bracket */