質問: floatがわかりません(^^; 質問1 奇数のピンクで囲った枠を「フロート・ライト」にして、 なぜイメージ画像の右側にまわりこめるのでしょうか? ↑と同じように、boxを2つ作って試してみましたが box1 box1 box2を「フロート・ライト」にしても、 box2はbox1の右側にはきませんでした。 ただ水平に親要素枠の右端に寄っただけでした。 box1を「フロート・レフト」にして、 box2を「フロート・ライト」にすると、 スクショのように、左右に横並びにできました。 でも、スクショの場合、イメージ画像には フロート・レフトにしていないのに、 ピンクで囲った枠はイメージ画像の右側にきています。 なぜでしょうか? 質問2 あと、偶数番目は「フロート・レフト」にしているのに、 なぜピンクの枠は右へまわりこんだのでしょうか? ![イメージ説明](https://teratail.storage.googleapis.com/uploads/contributed_images/3aa1fb8053c09ce1e9ae27a7e604a27c.png)
回答: > > box2を「フロート・ライト」にしても、 > > box2はbox1の右側にはきませんでした。 > > ただ水平に親要素枠の右端に寄っただけでした。 > > > box2を`float:right`にした場合、後続のボックスはbox2が存在しないように配置されます。この場合、box2が右によっているので、左に回り込んだように見えます。しかし、box1は後続ではないので影響を受けません。 > > イメージ画像には > > フロート・レフトにしていないのに、 > > ピンクで囲った枠はイメージ画像の右側にきています。 > > なぜでしょうか? > > > イメージ画像は指定をしない場合`display:inline`となり、テキストと同様に回り込みます。 > > あと、偶数番目は「フロート・レフト」にしているのに、 > > なぜピンクの枠は右へまわりこんだのでしょうか? > > > `:nth-of-type(even)`は兄弟要素の偶数番目、という意味ですのが、`.contain`は兄弟要素の中で一つしかないので常に奇数になります。「フロート・レフト」のスタイルは効いていません。 おそらく、`.feature:nth-of-type(even) .contain`と書くべきなのでは?