【float完全攻略】webデザインfloatを使ったカラム・レイアウト

スタイルシートでまず、つまずくのがfloatプロパティです。
癖がありすぎるプロパティで初心者には使いこなすのが難しいです。
まず、floatの本来の使い方です。
例えばhtmlでこういう風にマークアップしてみます。

HTML

  <p><img src="pinkRose.jpg" alt=""></p>
  <h2>pinkRose</h2>
<p>
    バラ属の成形は、灌木、低木、または木本性のつる植物で、葉や茎に棘を持つものが多い。葉は1回奇数羽状複葉。花は5枚の花びらと多数の雄蘂を持つ（ただし、園芸種では大部分が八重咲きである）。北半球の温帯域に広く自生しているが、チベット周辺、中国の雲南省からミャンマーにかけてが主産地でここから中近東、ヨーロッパへ、また極東から北アメリカへと伝播した。南半球にはバラは自生しない。バラ属の成形は、灌木、低木、または木本性のつる植物で、葉や茎に棘を持つものが多い。葉は1回奇数羽状複葉。花は5枚の花びらと多数の雄蘂を持つ（ただし、園芸種では大部分が八重咲きである）。北半球の温帯域に広く自生しているが、チベット周辺、中国の雲南省からミャンマーにかけてが主産地でここから中近東、ヨーロッパへ、また極東から北アメリカへと伝播した。南半球にはバラは自生しない。バラ属の成形は、灌木、低木、または木本性のつる植物で、葉や茎に棘を持つものが多い。葉は1回奇数羽状複葉。花は5枚の花びらと多数の雄蘂を持つ（ただし、園芸種では大部分が八重咲きである）。北半球の温帯域に広く自生しているが、チベット周辺、中国の雲南省からミャンマーにかけてが主産地でここから中近東、ヨーロッパへ、また極東から北アメリカへと伝播した。南半球にはバラは自生しない。バラ属の成形は、灌木、低木、または木本性のつる植物で、葉や茎に棘を持つものが多い。葉は1回奇数羽状複葉。花は5枚の花びらと多数の雄蘂を持つ（ただし、園芸種では大部分が八重咲きである）。北半球の温帯域に広く自生しているが、チベット周辺、中国の雲南省からミャンマーにかけてが主産地でここから中近東、ヨーロッパへ、また極東から北アメリカへと伝播した。南半球にはバラは自生しない。
  </p>

そしてこのようにCSSを書いてみます。

CSS

img{
  width: 150px;
  float: left;
  margin-right: 20px;
}
h2{
  font-size: 40px;
}

そうするとこのような表示になります。

本来floatは文中の画像を回り込ませるために使用します。
ですので画像以外の要素同士を回り込ませて横並びにするようには想定されていません。
レイアウト・カラムとしてfloatを使用する場合は下記の注意点を踏まえてfloatを適用していきます。

floatの注意点
floatを要素に適用したらその下に続く他の要素にもfloatの影響が及ぶ

これを防ぐにはclearプロパティと組み合わせてfloatを使用します。
clearはfloatを解除するためのプロパティでfloatを反映させたくない要素の直前に記述しておきます。
例として2カラムの下に3カラムを設定した時のHTMLとCSSです。

HTML

<section class="column2">
  <div>
    <p><img src="biel-morro-kcKiBcDTJt4-unsplash.jpg" alt=""></p>

  </div>
      <div>
    <p><img src="cesar-abner-martinez-aguilar-J_1rPaekCyc-unsplash.jpg" alt=""></p>

  </div>

</section>
  <section class="column3">
  <div>
    <p><img src="biel-morro-kcKiBcDTJt4-unsplash.jpg" alt=""></p>

  </div>
      <div>
    <p><img src="cesar-abner-martinez-aguilar-J_1rPaekCyc-unsplash.jpg" alt=""></p>

  </div>
      <div>
    <p><img src="doug-kelley-ydUG5wMk6q4-unsplash.jpg" alt=""></p>

  </div>

</section>

CSS

h2{
  font-size: 40px;
}
img{
  width: 100%;
}
.column2 div{
  width: 50%;
  float: left;
}
.column3 div{
  width: 33.33%;
  float: left;
}
.column2::after{
  content: "";
  display: block;
  clear: both;
}
.column3::after{
  content: "";
  display: block;
  clear: both;
}

clearプロパティを適用するために要素が必要です。
ですがわざわざclearプロパティ用だけで要素を作るのは情報として意味が無い要素なので避けたいところ。
その場合は::afterを使用します。
::afterで擬似要素をCSS上で作成し、clearプロパティを適用させます。