html - float :Left is not removed with media query

Question

我在我的 CSS 中使用 Float，但如果用户在小屏幕上，我想取消它。我的带有媒体查询的 CSS 工作正常，除了仍然应用“float:left”属性，即使在声明不应使用它之后也是如此:

/* floating some buttons */
#n2, #n3 {
  float:right;
}

/* but this is not removing the float: */
@media only screen and (min-width : 150px) and (max-width : 780px) {
  #n2, #n3 {
    clear: both !important;
  }
}

如何仅在特定情况下应用“ float ”？

Answer 1

正如我在 the comment 中指出的那样，当你要移除float时，你需要将值设置为none:

/* but this is not removing the float: */
@media only screen and (min-width : 150px) and (max-width : 780px) {
  #n2, #n3 {
    float: none;
  }
}

JSBin Demo