cssレイアウトのfloatがわかりません。

Question

floatがわかりません(^^;

質問１
奇数のピンクで囲った枠を「フロート・ライト」にして、
なぜイメージ画像の右側にまわりこめるのでしょうか？

↑と同じように、boxを２つ作って試してみましたが

<div class="bigbox"> <div class="box1">box1</div> <div class="box2">box1</div> </div>

box2を「フロート・ライト」にしても、
box2はbox1の右側にはきませんでした。
ただ水平に親要素枠の右端に寄っただけでした。
box1を「フロート・レフト」にして、
box2を「フロート・ライト」にすると、
スクショのように、左右に横並びにできました。
でも、スクショの場合、イメージ画像には
フロート・レフトにしていないのに、
ピンクで囲った枠はイメージ画像の右側にきています。
なぜでしょうか？

質問２
あと、偶数番目は「フロート・レフト」にしているのに、
なぜピンクの枠は右へまわりこんだのでしょうか？

Comments

[kei344]

（質問文は編集できます）コードはスクリーンショットでなくコードブロックにテキストでお書きください。

[退会済みユーザー]

アドバイスありがとうございます。

Answer 1

box2を「フロート・ライト」にしても、

box2はbox1の右側にはきませんでした。
ただ水平に親要素枠の右端に寄っただけでした。

box2をfloat:rightにした場合、後続のボックスはbox2が存在しないように配置されます。この場合、box2が右によっているので、左に回り込んだように見えます。しかし、box1は後続ではないので影響を受けません。

イメージ画像には

フロート・レフトにしていないのに、
ピンクで囲った枠はイメージ画像の右側にきています。
なぜでしょうか？

イメージ画像は指定をしない場合display:inlineとなり、テキストと同様に回り込みます。

あと、偶数番目は「フロート・レフト」にしているのに、

なぜピンクの枠は右へまわりこんだのでしょうか？

:nth-of-type(even)は兄弟要素の偶数番目、という意味ですのが、.containは兄弟要素の中で一つしかないので常に奇数になります。「フロート・レフト」のスタイルは効いていません。
おそらく、.feature:nth-of-type(even) .containと書くべきなのでは？

Comments

[退会済みユーザー]

丁寧に説明して頂いて、ありがとうございます。理解できました。