CSS レイアウト - float と clear

目次

1. float と clear
2. float定義と使用法
   1. float プロパティ
   2. float: right;
   3. float: left;
   4. No float
3. clear 属性
   1. clearfix Hack
4. float インスタンス
5. box-sizing
   1. 画像を並べて表示
   2. 等幅ボックス
6. すべての CSS float プロパティ

CSS レイアウト - float と clear

CSS の float プロパティは、要素がどのように浮動するかを指定します。

CSS の clear プロパティは、クリアされた要素の隣にどの要素をどの側にフローティングできるかを指定します。

float定義と使用法

float プロパティは、要素が浮動する方向を定義します。 従来、このプロパティは常に画像に適用され、テキストが画像の周りを回り込むようにしていましたが、CSS では任意の要素をフローティングにすることができます。 フローティング要素は、要素自体に関係なく、ブロック レベルのボックスを生成します。

置換されていない浮動要素の場合は、幅を明示的に指定します。それ以外の場合は、可能な限り狭くなります。

注: 行の上にフローティング要素用のスペースがほとんどない場合、要素は次の行にスキップされ、行に十分なスペースができるまでこのプロセスが続行されます。

float プロパティ

float 属性は、コンテンツの配置と書式設定に使用されます。たとえば、コンテナ内のテキストの左側に画像をフロート表示する場合などです。

float 属性には、次のいずれかの値を指定できます。

• left - 要素はコンテナの左側にフローティングされます
• right - 要素はコンテナの右側にフロートします
• none - 要素はフロート表示されません (テキスト内にのみ表示される場所に表示されます)。 デフォルト。
• inherit - 要素は親から float 値を継承します

最も単純な使用法は、float 属性を使用して、画像を囲むテキストを (新聞上で) 効果を実現できることです。

float: right;

次の例では、画像がテキスト内の右側にフローティングするように指定しています。

主要な Web テクノロジーのチュートリアル - すべて無料。 w3cstudy では、必要な Web サイト構築チュートリアルがすべて見つかります。 基本的な HTML から CSS、高度な XML、SQL、JS、PHP まで。

当社のリファレンス マニュアルは、ウェブサイト テクノロジーのあらゆる側面をカバーしています。 これらには、HTML、CSS、XML などの W3C 標準テクノロジが含まれます。 および JavaScript、PHP、SQL などのその他のテクノロジー。

例

img {
  float: right;
}

float: left;

次の例では、画像がテキスト内で左に配置されるように指定します。

主要な Web テクノロジーのチュートリアル - すべて無料。 w3cstudy では、必要な Web サイト構築チュートリアルがすべて見つかります。 基本的な HTML から CSS、高度な XML、SQL、JS、PHP まで。

当社のリファレンス マニュアルは、ウェブサイト テクノロジーのあらゆる側面をカバーしています。 これらには、HTML、CSS、XML などの W3C 標準テクノロジが含まれます。 および JavaScript、PHP、SQL などのその他のテクノロジー。

例

img {
  float: left;
}

No float

次の例では、画像はテキスト内に表示された場所に表示されます (float: none;):

例

img {
  float: none;
}

clear 属性

clear 属性は、どの要素がクリアされる要素の隣にどの側にフロートできるかを指定します。

clear 属性には、次のいずれかの値を指定できます。

• none - 両側で浮動要素を許可します。 デフォルト
• left - 左側ではフローティング要素は許可されません
• right- 右側ではフローティング要素は許可されません
• both - 左側または右側に浮動要素は許可されません
• inherit - 要素は親からクリア値を継承します

clear 属性の最も一般的な使用法は、要素で float 属性を使用した後です。

フロートをクリアするときは、クリアとフロートを一致させる必要があります。要素が左側にフロートされている場合は、左側もクリアされる必要があります。 フローティングされた要素は引き続きフローティングされますが、クリアされた要素はその下に表示されます。

次の例では、左側のフロートをクリアします。 (div の) 左側では浮動要素が許可されないことを示します。

例

div {
  clear: left;
}

clearfix Hack

要素がその要素を含む要素よりも高く、フローティングされている場合、その要素はコンテナの外に「オーバーフロー」します。

この問題は、含まれる要素に overflow: auto; を追加することで修正できます。

例

.clearfix {
  overflow: auto;
}

オーバーフロー: マージンとパディングを制御できる限り、自動クリアフィックスは適切に機能します (そうでない場合は、スクロールバーが表示される可能性があります)。 ただし、新しい最新の Clearfix ハックは使用するのがはるかに安全であり、次のコードはほとんどの Web サイトで使用されています。

例

.clearfix::after {
  content: "";
  clear: both;
  display: table;
}

::after 疑似要素については後の章で学習します。

float インスタンス

float 属性を使用すると、コンテンツ ボックスを簡単に並べてフローティングできます。

例

* {
  box-sizing: border-box;
}

.box {
  float: left;
  width: 33.33%; /* 3 つのボックス (4 つのボックスは 25% を使用、2 つのボックスは 50% を使用、など) */
  padding: 50px; /* 必要に応じて画像間にスペースを追加します */
}

box-sizing

3 つのフローターを並べて簡単に作成できます。 ただし、各ボックスの幅を広げるもの (パディングやボーダーなど) を追加すると、ボックスが壊れます。 box-sizing 属性を使用すると、ボックスの全体の幅 (および高さ) にパディングと境界線を含めることができ、パディングが壊れることなくボックス内に留まることが保証されます。

画像を並べて表示

ボックスのグリッドを使用して画像を並べて表示することもできます。

例

.img-container {
  float: left;
  width: 33.33%; /* 3 つのボックス (4 つのボックスは 25% を使用、2 つのボックスは 50% を使用、など) */
  padding: 5px; /* 必要に応じて画像間にスペースを追加します */
}

等幅ボックス

上の例では、ボックスを同じ幅で並べてフローティングする方法を学びました。 しかし、同じ高さのフローティングボックスを作成するのは簡単ではありません。 ただし、簡単な解決策は、以下の例のように、固定の高さを設定することです。

例

.box {
  height: 500px;
}

ただし、そうすると柔軟性が失われます。 箱に常に同じ量の中身が入っていることが保証できれば、それで問題ありません。 しかし、多くの場合、内容は異なります。 上記の例を携帯電話で試してみると、2 番目のボックスの内容がボックスの外側に表示されることがわかります。 ここで CSS3 Flexbox が役立ちます。ボックスを最長のボックスと同じ長さに自動的に引き伸ばすことができるためです。

例

Flexbox を使用してフレキシブル ボックスを作成する:

Flexbox の唯一の問題は、Internet Explorer 10 以前では動作しないことです。 Flexbox レイアウト モジュールの詳細については、CSS Flexbox の章をご覧ください。

すべての CSS float プロパティ