図やグラフに対してテキストを回り込ませる

floatプロパティでグラフを配置する

グラフ（画像で配置）をfloatプロパティで右側に配置し、左側の空間にテキストを流し込みます。

グラフの部分はfigure要素、グラフのキャプション（説明文）をfigcaption要素でマークアップします。

HTML コード例

<h2>グラフに対してテキストを回り込ませる</h2>
  <figure><img src="./images/pic_graph.png" alt="閲覧者の性別割合"><figcaption>閲覧者の性別割合</figcaption></figure>
  <p>当サイトの閲覧者の性別は男性が75.4%、女性は24.6%となっています。</p>
  <p>2016年は男性が81.8%、女性は18.2%、2017年が男性79.4%、女性20.6%と年々少しずつ女性の比率が高まってきており、女性のプログラマーが徐々に増えてきている可能性を示唆しています。</p>

CSS コード例

p {
  margin-bottom: 15px;
  line-height: 1.6em;
}
figure {
  float: right;
  margin: 0 0 15px 15px;
  width: 30%;
}
  figure img {
    margin-bottom: 10px;
    max-width: 100%;
  }
  figcaption {
    font-size: 72%;
    text-align: center;
  }

figure要素に「float: right;」を指定して右側に配置しています。

子孫要素であるimg要素は表示最大幅を親要素の幅となるように指定し、さらにキャプションとの距離をmargin-bottomプロパティを使って調整しています。

グラフのキャプションを表すfigcaption要素はデフォルトだと左揃えの表示になるため、「text-align: center;」で中央揃えにしています。
あわせて、文字サイズも本文より小さくなるように調整しました。