これまでのWebブラウザでは一貫して信頼できる結果が得られていたため、これまでは多くのWebサイトでHTMLテーブルを使用してページをレイアウトしていました。 テーブルは実際にはページをレイアウトするのではなく表形式のデータを表示することを目的としているため、これは理想的な解決策ではありませんでした。 テーブルを使用することは、レイアウトがページにハードコードされていることを意味し、サイトを更新する作業はより時間がかかります。 Cascading Style Sheetsは "float"プロパティを導入し、設計者は要素を左また​​は右に浮かせることができます。 これにより、ページをより細かく制御できるようになり、サイトのレイアウトをコンテンツから切り離すことができます。

1。

テキストエディタまたはHTMLエディタを開き、新しいHTMLドキュメントを作成します。

2。

ページ本体に次のコードを追加します。

ページを保存してWebブラウザで開きます。 2番目のdivのコンテンツが最初のdivのコンテンツの下に表示されます。

3。

HTMLドキュメントのセクションに次のCSSコードを挿入します。

ページを保存してブラウザで更新し、変更内容を表示します。 CSSルールは、“ myContainer” div内にネストされている両方のdivを対象としています。 "float"プロパティはブラウザにdivを左にフロートさせるように指示します - float値を "right"に変更してdivをそれを含むdivの右端にフロートさせることができます。 divは300ピクセルの固定幅に設定され、レイアウトを見やすくするために1ピクセルの黒い境界線があります。 ブラウザに、ボックスが横に並んで表示されているのがわかります。

4。

以下に示すように、「myContainer」divの外側にある3番目のdivをページ本体に追加します。

ページを保存してブラウザに再読み込みします。 フロートされていなくても、3番目のdivが1番目と2番目のdivの横に表示されます。 これは、残りのHTML要素が浮動要素の周囲を流れるために発生します。 これは望ましい動作になることがありますが、この例では、フッターを作成するために、3番目のdivをフローティングdivの下に表示したいと考えています。

5。

ページの先頭にあるスタイルセクションに次のルールを挿入します。

myFooter {

clear: both; 

}

これは、3番目の「myFooter」divをターゲットにして、「myContainer」divの下にあるfloatを中断して後続のHTML要素を表示するようにブラウザに指示します。 ページを保存して更新します。 3番目のdivによって形成されたフッターが、フローティングdivの下に表示されていることがわかります。

先端

• CSSの「margin」プロパティを使用して、浮動divの間にスペースを作成できます。