CSS1 テストスイート: 5.5.25 float

下記のテキストに適用されるスタイル宣言は、つぎのとおりです。

P { margin: 0; padding: 0; text-align: justify;}
.one {float: left; width: 50%; background-color: yellow; padding: 0; margin: 0;}
.two {float: left; background-color: yellow; width: 100%;
      margin: 0; padding: 0; border-width: 0;}
.three {float: none;}
.four {float: left; font-size: 200%; font-weight: bold;
    width: 1.5em; background-color: silver;}
.five {float: right; width: 20em;
      background-color: yellow; border: 3px solid red;
      padding: 5px; margin: 10px;}
.six {float: right; width: 20em;
      background-color: yellow; border: none;
      padding: 5px; margin: 10px;}
.seven {float: right; width: 50%;
       background-color: yellow; border: 1px solid gray;}
.eight {float: left; width: 25%;
        background-color: #66CCFF;
        padding: 0; margin: 0}
.nine {float: right; width: 25%;
       background-color: yellow;
       padding: 0; margin: 0}

この段落はクラス "one" です。 これは幅が 50% で、左方へ浮遊させられます。

この段落は、前の段落を包含している黄色のボックスの右側で始まるはずです。 この要素のテキストは前の段落のテキストよりも遙かに長いので、黄色いボックスの周囲で折り返されるはずです。 この要素にも前の要素にもパディングやボーダー、マージンはありませんから、この2つの要素のテキストはお互いにとても密着しているはずです。

この段落はクラス "two" です。 幅が 100% に設定されているので、自動的に、親要素が許す限りの横幅になるはずです。 したがって、要素が浮遊させられても、その側には他のコンテンツのためのスペースがなく、橙色の正方形の画像は、段落の次ではなく、段落の後に見えるはずです。 この段落には診断目的のために黄色の背景が追加されています。

この段落は左方へ浮遊させられますので、橙色の正方形の画像は段落の右に現れるはずです。 この段落には黄色の背景がありますが、パディング、マージン、ボーダーはありません。 この黄色のボックスの右縁は、下にある黄色のボックスの左縁と水平的に揃っているはずです。

この段落は(STYLE 属性を使って)右方へ浮遊させられるので、橙色の正方形の画像は段落の左に出現するはずです。 この段落には黄色の背景がありますが、パディング、マージン、ボーダーはありません。 この黄色のボックスの左縁は、上にある黄色いボックスの右縁と水平的に揃っているはずです。

この段落の最初の文字(「こ」)は、左方へ浮遊するはずで、またフォントサイズは段落の残りの2倍で、太字で、内容幅は 1.5em で、背景色は銀色のはずです。 「こ」という大きい文字の上端は、この段落の最初の行の上端と垂直的に揃っているはずです。 これは「ドロップキャップ」として一般に知られています。

この段落は右方へ浮遊させられるはずです。 すこし雑誌記事の「補足記事」に似ています。 横幅は 20em ですから、ビューポートのサイズが変更される(例. ウインドウがサイズ変更される)ときにもフォーマットし直されないはずです。 要素の背景色は黄色で、5px 幅のパディングの外側に 3px で無地で赤色のボーダーがあるはずです。 また、要素には周囲に 10px 幅のマージンがあり、そこでは通常の流れでのその段落の青色の背景が透けて見えるはずです。

この段落は浮遊しません。 充分なスペースがあれば、段落のテキスト内容は、右側にある黄色の「補足記事」の左側に現れるはずです。 この要素の内容は浮遊要素の周囲を流れるはずです。 もっとも、浮遊要素は、この要素の青色の背景に隠されるかもしれませんし、隠されないかもしれません。 仕様書はどちらが「上面に」描画されるか言わないからです。 浮遊要素が隠される場合でも、マージンスタイルが浮遊要素に設定されているので、この段落の青色の長方形は補足記事の赤色のボーダーの右方及び上方に 10px 広がっているはずです。

この段落は、青色のボックス(左側)と黄色のボックス(右側)との間に現れるはずです。

TABLEテストコーナー

この段落はクラス "one" です。 これは幅が 50% で、左方へ浮遊させられます。 この段落は、前の段落を包含している黄色のボックスの右側で始まるはずです。 この要素のテキストは前の段落のテキストよりも遙かに長いので、黄色いボックスの周囲で折り返されるはずです。 この要素にも前の要素にもパディングやボーダー、マージンはありませんから、この2つの要素のテキストはお互いにとても密着しているはずです。 この段落はクラス "two" です。 幅が 100% に設定されているので、自動的に、親要素が許す限りの横幅になるはずです。 したがって、要素が浮遊させられても、その側には他のコンテンツのためのスペースがなく、橙色の正方形の画像は、段落の次ではなく、段落の後に見えるはずです。 この段落には診断目的のために黄色の背景が追加されています。 この段落は左方へ浮遊させられますので、橙色の正方形の画像は段落の右に現れるはずです。 この段落には黄色の背景がありますが、パディング、マージン、ボーダーはありません。 この黄色のボックスの右縁は、下にある黄色のボックスの左縁と水平的に揃っているはずです。 この段落は(STYLE 属性を使って)右方へ浮遊させられるので、橙色の正方形の画像は段落の左に出現するはずです。 この段落には黄色の背景がありますが、パディング、マージン、ボーダーはありません。 この黄色のボックスの左縁は、上にある黄色いボックスの右縁と水平的に揃っているはずです。 この段落の最初の文字(「こ」)は、左方へ浮遊するはずで、またフォントサイズは段落の残りの2倍で、太字で、内容幅は 1.5em で、背景色は銀色のはずです。 「こ」という大きい文字の上端は、この段落の最初の行の上端と垂直的に揃っているはずです。 これは「ドロップキャップ」として一般に知られています。 この段落は右方へ浮遊させられるはずです。 すこし雑誌記事の「補足記事」に似ています。 横幅は 20em ですから、ビューポートのサイズが変更される(例. ウインドウがサイズ変更される)ときにもフォーマットし直されないはずです。 要素の背景色は黄色で、5px 幅のパディングの外側に 3px で無地で赤色のボーダーがあるはずです。 また、要素には周囲に 10px 幅のマージンがあり、そこでは通常の流れでのその段落の青色の背景が透けて見えるはずです。 この段落は浮遊しません。 充分なスペースがあれば、段落のテキスト内容は、右側にある黄色の「補足記事」の左側に現れるはずです。 この要素の内容は浮遊要素の周囲を流れるはずです。 もっとも、浮遊要素は、この要素の青色の背景に隠されるかもしれませんし、隠されないかもしれません。 仕様書はどちらが「上面に」描画されるか言わないからです。 浮遊要素が隠される場合でも、マージンスタイルが浮遊要素に設定されているので、この段落の青色の長方形は補足記事の赤色のボーダーの右方及び上方に 10px 広がっているはずです。 この段落は右浮遊の DIV 要素の内側に置かれます。 DIV 要素の幅は 20em です。 背景は黄色で、5px のパディングと 10px のマージンとがあり、ボーダーはありません。 浮遊させられますので、黄色のボックスは隣接する非浮遊要素の背景やボーダーの上面にレンダリングされるはずです。 この黄色のボックスの左方には、青色の背景と赤色のボーダーのある短い段落があるはずです。 黄色のボックスは、赤色の下ボーダーの上面にレンダリングされるはずです。 すなわち、赤色の下ボーダーは、黄色の長方形が重なる箇所で途切れて見えることになります。 右側のボックスにある説明を見てください。 この段落は左浮遊の DIV の中にあります。 背景は青色で、幅は25%です。 この段落は右浮遊の DIV の中にあります。 背景は黄色で、幅は25%です。 この段落は、青色のボックス(左側)と黄色のボックス(右側)との間に現れるはずです。 左側のボックスにある説明を見てください。 この段落は左浮遊の DIV の中にあります。 DIV 要素の背景は青色で、幅は75%です。 このテキストはすべて青色の長方形の中にあるはずです。 青色の DIV 要素は、別の DIV 要素を子としてもっています。 それは黄色の背景色をもち、右方へ浮遊させられます。 黄色の DIV は青色の DIV の子ですから、青色の長方形の中に現れるはずです。 黄色の長方形は、右方に浮遊させられ、10pxの右マージンをもっていますから、その右側には10pxの青色のストライプがあるはずです。