CSS media queryについて

質問

下記のcssで疑問があります。

@media all and (min-width:500px)と@media all and (min-width:1000px)に
それぞれ違うスタイルがあります。

(min-width:500px)にはfloatがあり、(min-width:1000px)にはありません。
しかし、(min-width:1000px)にもfloatされているのですが仕様でしょうか？

もしこれが仕様であれば...
floatさせないようにするには(min-width:1000px)にも
設定をしなければならないということでしょうか？

宜しくお願いします。
--------------------------------------
@media all and (min-width:500px) {

#box01{
float:left;
width:240px;
height:400px;
background:#334467;
}

#box02{
float:right;
width:240px;
height:400px;
background:#ffff00;
}

}

@media all and (min-width:1000px) {

#box01{
width:400px;
height:400px;
background:#334467;
}

#box02{
width:400px;
height:400px;
background:#546789;
}

}

回答No.1

t_ohta · ベストアンサー

画面幅が1000px以上のデバイスの場合、まずmin-width:500pxで設定されているスタイルが適用されます。（500pxより大きいから）
続いてmin-width:1000pxの設定でスタイルを上書いて行きます。
min-width:500pxの設定では#box01に対してfloat:left;を適用していますがmin-width:1000pxの設定ではfloatに関する定義が無いため幅、高さ、背景色だけ定義を上書きして、floatに関する定義はmin-width:500pxの設定が残ります。
floatさせないようにするにはmin-width:1000pxにfloat:none;を定義しましょう。

お礼

t_ohta 様

"上書き"で納得しました！
ありがとうございました。