CSS｜float（フロート）による回り込みの解除

float指定前

親要素「.sample-parent」の中に、子要素を２つ配置します。

    <div class="sample-parent">
      .sample-parent
      <div class="sample-child-1">
        .sample-child-1
      </div>
      <div class="sample-child-2">
        .sample-child-2
      </div>
    </div>
    

    .sample-parent {
      background: #4682b4;
    }
    .sample-child-1 {
      width: 40%;
      height: 40px;
      background: #d2691e;
    }
    .sample-child-2 {
      width: 30%;
      height: 80px;
      background: #6b8e23;
    }
    div[class*="sample-"] {
      padding: 2px;
      margin: 4px;
    }
    

floatを指定すると・・

子要素にfloatを指定します。

    .sample-parent {
      background: #4682b4;
    }
    .sample-child-1 {
      width: 40%;
      height: 40px;
      background: #d2691e;
      float: left;         /* float指定 */
    }
    .sample-child-2 {
      width: 30%;
      height: 80px;
      background: #6b8e23;
      float: left;         /* float指定 */
    }
    div[class*="sample-"] {
      padding: 2px;
      margin: 4px;
    }
    

親要素「.sample-parent」に height（高さ）の指定がないため、子要素の高さを失ってしまいます。
もちろん親要素に、heightの指定を任意で行えば高さを維持できますが、heightには固定値しか指定できず、子要素の高さとは関係ないため指定が大変です。

これを回避するためには「floatの解除」が必要となります。

floatの解除１｜clearを使う方法

floatを解除する空の子要素を追加する方法です。
ここでは「.clearfloat」という名のブロックを作成します。

    <div class="sample-parent">
      .sample-parent
      <div class="sample-child-1">
        .sample-child-1
      </div>
      <div class="sample-child-2">
        .sample-child-2
      </div>
      <div class="clearfloat">
        .clearfloat
      </div>
    </div>
    

    .sample-parent {
      background: #4682b4;
    }
    .sample-child-1 {
      width: 40%;
      height: 40px;
      background: #d2691e;
      float: left;
    }
    .sample-child-2 {
      width: 30%;
      height: 80px;
      background: #6b8e23;
      float: left;
    }
    div[class*="sample-"] {
      padding: 2px;
      margin: 4px;
    }
    .clearfloat {
      background: #00f;
      clear: both;          /* float解除 */
    }
    

ここではイメージしやすいように、子要素「.clearfloat」を見えるようにしていますが、実際に使用する場合は見えなくします。

    .clearfloat {
      background: #00f;
      clear: both;          /* float解除 */
      text-indent: -9999px; /* テキストインデントをマイナスで指定 */
      height: 0px;          /* 高さ 0px */
    }
    

テキストのない空のブロックがコード上に登場することになりますが、 ソースコードに明示的に空の要素を記述するので、分かりやすくなるメリットもあります。

floatの解除２｜擬似要素「:after」を使う方法

floatを解除する空の疑似要素を追加する方法です。
親要素の「.sample-parent」の「:after疑似要素」を利用して解除します。

CSSで親要素の後に生成するため、文書構造を損なわずに設定できます。

    <div class="sample-parent">
      .sample-parent
      <div class="sample-child-1">
        .sample-child-1
      </div>
      <div class="sample-child-2">
        .sample-child-2
      </div>
    </div>
    

    .sample-parent {
      background: #4682b4;
    }
    .sample-child-1 {
      width: 40%;
      height: 40px;
      background: #d2691e;
      float: left;
    }
    .sample-child-2 {
      width: 30%;
      height: 80px;
      background: #6b8e23;
      float: left;
    }
    div[class*="sample-"] {
      padding: 2px;
      margin: 4px;
    }
    .sample-parent:after {
      clear: both;
      display: block;
      content: " ";
      height: 0px;
      visibility: hidden;
    }
    

コーディング上には登場しないため、コードがすっきりします。

floatの解除３｜.clearfixを使う方法

上記２と同じ方法です。
.clearfixというクラス名にしておくことで、限られた要素だけでなく汎用的に使うことができるようになります。

    <div class="sample-parent clearfix">
      .sample-parent
      <div class="sample-child-1">
        .sample-child-1
      </div>
      <div class="sample-child-2">
        .sample-child-2
      </div>
    </div>
    

    .clearfix:after {
      clear: both;
      display: block;
      content: " ";
      height: 0px;
      visibility: hidden;
    }
    .sample-parent {
      background: #4682b4;
    }
    .sample-child-1 {
      width: 40%;
      height: 40px;
      background: #d2691e;
      float: left;
    }
    .sample-child-2 {
      width: 30%;
      height: 80px;
      background: #6b8e23;
      float: left;
    }
    div[class*="sample-"] {
      padding: 2px;
      margin: 4px;
    }