<div style="clear: both; width:auto; height:1px;"></div>

<img src="./画像ファイル名.jpg" width="300px" style=" float: left; margin:0 20px;">

Sample Text!! Sample Text!! Sample Text!! Sample Text!! Sample Text!! Sample Text!! Sample Text!! Sample Text!! Sample Text!! Sample Text!! Sample Text!! Sample Text!! Sample Text!! Sample Text!! Sample Text!! Sample Text!! Sample Text!! Sample Text!! Sample Text!! Sample Text!! Sample Text!! Sample Text!! Sample Text!! Sample Text!! Sample Text!! Sample Text!! Sample Text!! Sample Text!! Sample Text!! Sample Text!!

<div style="clear: both; width:auto; height:1px;"></div>

回り込ませたい文字列の前にある画像に、
「float: left;」を指定するだけで、
文字の回り込みを実行することができる。

「左詰め」で表示したい場合は、「float: left;」
「右詰め」で表示したい場合は、「float: right;」

だが、「float」プロパティ前後には、
「float」の効果を「リセット」するために、
「clear: both;」を指定しておく必要がある。

「float」の効果を「リセット」をリセットしないと、
いつまでも、回り込みの設定が続き、
レイアウトが崩れる。
「回り込み」効果をなくしたい要素に、
「clear: both;」を指定するだけなので簡単。

「float」プロパティを使用する前後に、

「<div style="clear: both; width:auto; height:1px;"></div>」

を記述して、「Clear: both;」で、「float」効果をリセットすると、
前後のレイアウトに、影響を与えないようにすることができる。

Back

「float」プロパティの書式

「float」プロパティは、
指定した要素を以降を
指定した方向に詰めて配置される機能を持つ。

「画像」に「float」プロパティを指定すると、
そのあとに続く「画像」「文字列」などは、
横幅が可能な限り、横に配置される。

主に、「画像」の周辺に、
文字列の文章などを配置したい時に使われる。

「float」プロパティで指定した横詰めの効果を「リセット」するには、
「clear」プロパティを使用して「リセット」する。

「float」プロパティの値

値	説明

left	「左詰め」で要素を配置していく。
right	「右詰め」で要素を配置していく。
none	「float」効果は適用されない。（回り込みはされない）
inline-start	親ブロックの「始端」側に詰めて配置される。「左書き」では「左側」、「右書き」は「右側」。
inline-end	親ブロックの「終端」側に詰めて配置される。「左書き」は「右側」、「右書き」は「左側」。

「float」プロパティのサンプルコード

キーワード値

float: left;
float: right;
float: none;
float: inline-start;
float: inline-end;

グローバル値

float: inherit;
float: initial;
float: revert;
float: unset;

「float」プロパティの値を指定したときの要素計算値の変化

「float」プロパティは、暗黙的にブロックレイアウトの使用するので、
「display」の計算値を変更する場合がある。

指定値	計算値
inline	block
inline-block	block
inline-table	table
table-row	block
table-row-group	block
table-column	block
table-column-group	block
table-cell	block
table-caption	block
table-header-group	block
table-footer-group	block
inline-flex	flex
inline-grid	grid
その他	変更なし

Back

「clear」プロパティの書式

「clear」プロパティは、
「float」プロパティで指定された
「回り込み」「横詰め」の効果を解除するための「CSS」プロパティ。

「float」プロパティで指定した設定を解除しなかった場合、
指定した要素以降は、
すべて、「横詰め」で表示され、
レイアウトが崩れることになる。
必ず「Clear」にリセットが行われるので、
「clear」プロパティは、「float」プロパティとセットで使用される。

「clear」プロパティの指定方法

「clear: both;」＝「float: left;」「float: right;」両方のリセット
「clear: left;」＝「float: left;」のリセット
「clear: right;」＝「float: right;」両方のリセット

「clear」プロパティの値

値	説明
none	指定した浮動要素（float）を解除しない。
left	指定した左側への浮動要素「float: left」を解除しない。
right	指定した右側への浮動要素「float: right」を解除しない。
both	指定した左右両方の浮動要素「float: left」「float: right」を解除しない。
inline-start	親ブロックと同じ浮動要素（float）を解除する。親要素の「始端」が「左」であれば、「float: left」を解除する。親要素の「始端」が「右」であれば、「float: right」を解除する。
inline-end	親ブロックと逆の浮動要素（float）を解除する。親要素の「始端」が「左」であれば、「float: right」を解除する。親要素の「始端」が「右」であれば、「float: left」を解除する。

「clear」プロパティのサンプルコード

キーワード値

clear: none;
clear: left;
clear: right;
clear: both;
clear: inline-start;
clear: inline-end;

グローバル値

clear: inherit;
clear: initial;
clear: revert;
clear: unset;

Back