【float完全攻略2】webデザインfloatでテキストを含むカラム・レイアウト

【float完全攻略2】webデザインfloatでテキストを含むカラム・レイアウト

テキストを含んだカラム・レイアウトでは隣接するカラムの間に余白を設けないと文章が読みにくくなります。
ですので余白を設けるわけですがfloatプロパティを適用した要素には絶対、余白とborderは適用しないでください。
1ピクセルでも使用するとカラムレイアウトが崩れてしまいます。
そして隣り合うカラムに余白を設けたいわけですが、
その場合はfloatを設定していない要素に余白かborderを設定すれば問題ありません。
ですがどうしてもfloatをかけた要素に余白かborderを設定しなければならない場合はbox-sizigプロパティを合わせて使用してください。
例えば下記の2カラムHTMLに

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

</section>

下記CSSを適用します。divタグにfloatを設定しますが一緒にbox-sizingも設定しています。
ですのでさらに一緒にpaddingを設定していますが崩れることなく余白が適用されています。

h2{
  font-size: 40px;
}
img{
  width: 100%;
}
.column2 div{
  width: 50%;
  float: left;
  box-sizing: border-box;
}
.column2 .one{
  padding-right: 10px;
}
.column2 .two{
  padding-left: 10px;
}

これでクラス名oneのdivタグとクラス名twoのdivタグに余白を指定しています。
divタグにfloatだけ設定していると余白を付け加えた時点で崩れます。

box-sizingはfloatに優しいプロパティ

しかしdivタグの中にbox-sizing: border-box;を一緒に適用させることで余白による崩れを止めることが出来ます。
これはborderプロパティも一緒で崩れることはありません。
ですが余白には２つプロパティがありましてpaddingプロパティとmarginプロパティがあります。
paddingはbox-sizingを適用することで崩れなくなりますがmarginはbox-sizingを使用しても崩れます。
残念ですがmarginプロパティは余白として使用しないようにします。