HTML文書（例えば、ウェブページ）内のブロックレベルの要素は、連続した順序で現れる。ページをより魅力的に見せるため、またはその有用性を高めるために順序を変更するには、イメージを含むブロックをラップして、そのページのテキストがそのページの周りを流れるようにする必要があります。
ウェブの言葉では、この効果はイメージを「浮動」させることとして知られている。このスタイルは、 "float"のCSSプロパティで実現されます。このプロパティを使用すると、テキストは、左揃えのイメージの周りを右に流れることができます。または、右に位置する画像の周りを左にします。
HTMLで始める
あなたがする必要がある最初のことは、いくつかのHTMLを扱うことです。この例では、テキストの段落を記述し、段落の先頭にテキストを追加します（テキストの前に、開かれた後に
タグ）。 HTMLマークアップの外観は次のとおりです。
段落のテキストはここにあります。この例では、私たちはヘッドショットの画像を持っているので、このテキストは、ヘッドショットがある人に関するものです。
画像はHTMLのブロックレベルの要素なので、デフォルトでは、画像の上に画像が表示されます。これは、デフォルトでイメージ要素の前後に改行がブラウザに表示されることを意味します。このデフォルトの外観はCSSに変えられます。ただし、最初に、image要素にクラス値を追加します。そのクラスはCSSで後で使用する "フック"として機能します。
段落のテキストはここにあります。この例では、私たちはヘッドショットの画像を持っているので、このテキストは、ヘッドショットがある人に関するものです。
この「左」のクラスは、単独では何もしません。希望のスタイルを達成するためには、次にCSSを使用する必要があります。
CSSスタイル
私たちのHTML（クラス属性が "left"）を含めて、CSSを使うことができます。私たちはスタイルシートにそのイメージを浮動させるルールを追加し、イメージの周りに最終的に折り返すテキストがあまりにも近づかないように、その隣に小さなパディングを追加します。あなたが書くかもしれないCSSはここにあります：
.left { float：left; パディング：0 20px 20px 0;}
このスタイルは、そのイメージを左に浮動させ、イメージの右と下に少しのパディング（CSS略語を使用）を追加します。 ブラウザでこのHTMLが含まれているページを確認した場合、画像は左に揃えられ、段落のテキストは右に表示され、適切な間隔の間隔で表示されます。私たちが使用した "left"のクラス値は任意であることに注意してください。 「左」という言葉はそれ単独では何もしないので、何かを呼び出すことができました。あなたが使っている視覚的な変更を指示する実際のCSSスタイルで動作するHTMLにclass属性を持たなければなりません。 イメージ要素にクラス属性を与え、要素を浮動させる一般的なCSSスタイルを使用するこのアプローチは、この「左揃えのイメージ」の外観を実現できる唯一の方法です。また、クラス値をイメージから取り除いて、より具体的なセレクタを書くことでCSSでスタイルを設定することもできます。例えば、そのイメージが "main-content"クラス値を持つディビジョンの内部にある例を見てみましょう。 このイメージのスタイルを設定するには、次のCSSを記述します： .main-content img { float：left; パディング：0 20px 20px 0;}
このシナリオでは、画像は左に揃えられ、以前のようにテキストが浮かびますが、マークアップに余分なクラス値を追加する必要はありません。これを大規模に行うと、HTMLファイルのサイズを小さくすることができ、管理が容易になり、パフォーマンスを向上させることができます。 最後に、スタイルをHTMLマークアップに直接追加することもできます：
このメソッドは「インラインスタイル」と呼ばれます。要素のスタイルと構造上のマークアップが結合されているため、お勧めできません。 Webのベストプラクティスでは、ページのスタイルと構造を別々にしておく必要があります。この分離は、ページのレイアウトを変更して、レスポンシブウェブサイトでさまざまな画面サイズやデバイスを探す必要がある場合に特に役立ちます。 ページのスタイルをHTMLに絡めば、異なる画面に必要なときにサイトの見た目を調整するメディアクエリを作成するのがはるかに難しくなります。 これらのスタイルを実現する別の方法
段落のテキストはここにあります。この例では、私たちはヘッドショットの画像を持っているので、このテキストは、ヘッドショットがある人に関するものです。 インラインスタイルを避ける
段落のテキストはここにあります。この例では、私たちはヘッドショットの画像を持っているので、このテキストは、ヘッドショットがある人に関するものです。
