float clearの使い方

[統計] HTMLからXHTMLへの移行を進めていますか?



0   名前: もや : 2006/07/03(月) 15:54  ID:XY54P5.K
float clearについてお尋ね致します。

下の様に致しますと、ボックス『え』は『float clear』を使用しないでも、
解除されています。
又高さの違うボックス『お』に対して、ボックス『き』は『float clear』を使用しないと解除されません。
『float clear』は高さに関係があり、同じでしたら使用しなくても解除されると考えて良いのでしょうか。
それとも見る方によって崩れてしまうのでしょうか。
私のものではどちらでも通用致しますので、これで良いのか判らず戸惑ってしまいましたので質問させて頂きました。


float1{
float : left;/*左回り込み*/
}

.float-c{
clear : both;/*回り込み解除*/
margin-top : 10px; margin-left : 0px;
margin-right : 0px;
margin-bottom : 0px;
}

.box6{
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 : #ff00ff #ff00ff #ff00ff #ff00ff;
width : 200px;
background-color : #ffe8f7;
}

.box100{
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 : blue blue blue blue;
width : 400px;
height : 300px;
background-color : aqua;
}

**ここからHTML**

<div class="float1">
<div class="box6">あ</div>
</div>

<div class="float1">
<div class="box6">い</div>
</div>

<div class="box6">う</div>

<div class="box6">え</div>

<div class="float1">
<div class="box100">お</div>
</div>

<div class="box6">か</div>

<div class="float-c">
<div class="box6">き</div>
</div>

1   名前: カヅサツ : 2006/07/03(月) 15:54  [URL]  ID:O5hEMlpW
clearプロパティの性質については、以下のページが詳しいです。
http://www.geocities.jp/multi_column/float/06.html

2   名前: もや : 2006/07/03(月) 15:54  ID:XY54P5.K
ご回答有り難うございます。
良く読んで勉強してみます。
(私用でお返事遅くなりましたこと、お詫び申し上げます。)

一覧へ戻る