>float2はスタイルシートに詳細が設定されておりませんのに
>(float : left;/*左回り込み*/width : 200px;が無い)
>何故使えているのでしょうか?
名前をつけはしたけれど、内容を記述しなくとも
divタグが変化してしまうわけではないので、元々の効果です。
class名は必ずつけなくてはならないわけではない…はずですよ。
ええと、本題です。
.float1{
float : left;/*左回り込み*/
width : 200px;
}
.box1{
padding-top : 2%;
padding-left : 2%;
padding-right : 2%;
padding-bottom : 2%;
border-width : 1px 1px 1px 1px;
border-style : solid solid solid solid;border-color : #009900 #009900 #009900 #009900;
width : 200px;
}
.box3{
padding-top : 2%;/*500*/
padding-left : 2%;
padding-right : 2%;
padding-bottom : 2%;
border-width : 1px 1px 1px 1px;
border-style : solid solid solid solid;
border-color : #009900 #009900 #009900 #009900;
width : 500px;
}
.float-c{
clear : both;/*回り込み解除*/
margin: 10px 0px 0px 0px;
}
float2はお役ごめんになったので削除しました。
あと自分でわかりやすいように「う」をちょっと離すのにfloat-cにマージン入れましたがここは修正してください。
<div class="float1">
<div class="box1">あ
</div>
<div class="box1">あ
</div>
<div class="box1">あ
</div>
<div class="box1">あ
</div>
<div class="box1">あ
</div>
</div>
<div class="box3">い
</div>
<div class="float-c">
<div class="box3">う
</div>
</div>
こんな感じでしょうか?