floatの副作用

floatとは

cssのプロパティの一つで、通常ブロックレベル要素同士は縦に並ぶが、floatプロパティを使うことで指定した要素を左または、右に寄せることができる（横並びにできる）

注意すべき点

例えば、下記のようなコードがあったとする

sample.html

<div class = "contents">
  <div class = "left-content"></div>
  <div class = "right-content"></div>
</div>
<footer></footer>

style.css

.contents{
background-color:black;
width:100px;
}

.left-content{
background-color:blue;
height:50px;
width:50px;
float:left;
}

.right-content{
background-color:red;
height:50px;
width:50px;
float:left;
}

footer{
widht:150px;
height:20px;
background-color:green;
}

結論から言うと、子要素（赤と青）はこれを実行した場合横並びになるが、

・親要素の高さは指定しない限り、子要素に依存するため高さが保てなくなり認識されなくなる（表示されない）
・後続の要素（footer)が浮いた子要素の下に回り込み、重なって表示されてしまう

上記の2つの弊害が起きてしまう

どうすれば良いか

style.css

.clearfix::after {  ←追加で記述
  clear: both ;　　　
  content: '';      
  display: block;
}

sample.html

<div class = "contents clearfix"> 　←floatを使用している要素の親要素にクラスを追加
  <div class = "left-content"></div>
  <div class = "right-content"></div>
</div>
<footer></footer>

cssに上記のコードをまるまる追加して、親要素にクラスを追加してあげれば副作用を解除することが出来ます。

ざっくり説明すると

・afterは擬似要素と言われHTMLに記述しなくても要素を後付けできる
・contentプロパティは追加する要素の中身を決める
・clearプロパティは回り込みを防ぐ
・displayプロパティは追加する要素がブロックorインライン要素か決める

といった感じです。まとまりで覚えちゃっていいと思います。

個人的にはflexboxの方が副作用などもなく、圧倒的に使っているのでもし興味がある方は調べてみてください。