CSS：浮动：none；被忽略了

Question

在 this website 上，当视口宽度减小到 595 像素或以下时，应应用以下 CSS：

@media (max-width:595px) {
    #header-left,#header-right {
        display: block;
        width: 100%;
        float: none;
    }
}

浏览器正在识别 CSS，它似乎处于活动状态，但是，#header-left（包含徽标）不是 100% 宽，或者是 #header-right（包含phone 号）。

也就是#header-left & #header-right还是尽量占一半的宽度，并排出现，而不是上下左右。

为什么会出现这种情况？谢谢。

Answer 1

从 #logo {position: absolute;top: 0px;left: 0px;} 中删除 position:absolulte; 并从 #menu 中删除然后您的代码可以正常工作。

Answer 2

您应该覆盖 css 中针对 595px 大小的以下注释规则：

#logo {
  /* position: absolute; */
  /* top: 0px; */
  /* left: 0px; */
}
#header-right {
  width: 50%;
  float: right;
  padding-top: 8px;
  /* text-align: right; */
}
#menu {
  /* position: absolute; */
  /*top: 80px;*/
  /*left: 0px;*/
  background: url(images/menu-bg.png) no-repeat;
  width: 960px;
  height: 55px;
}

注意：覆盖注释规则

CSS：浮动：none；被忽略了

CSS: float: none; being ignored

css

css-float