スキルテスト: 浮動ボックス
このスキルテストの目的は、 CSS の浮動ボックスを理解しているかを評価するために、 float と clear プロパティと値、そして浮動ボックスをクリアするその他の方法を使用することです。今までに扱った素材のさまざまな要素を使用する、 3 つの小さな課題に取り組んでいただきます。
メモ: 以下の対話型エディターで取り組むことができます。ただし、コードをダウンロードし、CodePen、jsFiddle、Glitchなどのオンラインツールを使用して作業したほうが便利な場合もあります。
行き詰まった場合は、コミュニケーションチャンネルのいずれかに連絡してください。
課題 1
この課題では、クラスが float1 と float2 の 2 つの要素をそれぞれ左右に浮動させる必要があります。テキストは下記の画像のように 2 つのボックスの間に現れるはずです。
以下のライブコードを更新して、完成例を再現してみてください。
自分自身のエディターやオンラインエディターで作業する場合は、このタスクの開始点をダウンロードしましょう。
課題 2
この課題では、クラスが float の要素を左に浮動させてください。そして、最初の行のテキストはその要素の隣に表示し、続く行のテキスト（クラス below を持つ）はその下に表示していただきたいです。
最終結果は下記の画像のようになるはずです。
以下のライブコードを更新して、完成例を再現してみてください。
自分自身のエディターやオンラインエディターで作業する場合は、このタスクの開始点をダウンロードしましょう。
課題 3
この課題では、浮動要素があります。浮動要素とテキストを包むボックスは、浮動要素の後ろに表示されています。利用できる最新の方法を使用して、下記の画像のようにボックスの背景を浮動要素の下まで拡張させてください。
以下のライブコードを更新して、完成例を再現してみてください。
自分自身のエディターやオンラインエディターで作業する場合は、このタスクの開始点をダウンロードしましょう。