【0からやり直すフロント/html/css】floatとclearfix
flexboxの時代だが、floatとclearfix
floatの影響
floatを書けた要素の高さを親要素が認識できなくなる これにより、要素どうしがかぶったりする
こんなとき
<div class="main-body"> <div class="left"></div> <div class="right"></div> </div> <div class="bottom"></div>
.left { float: left; } .right{ float: right; }
なので、余分な回り込みをなくす(clear)する
clearfix
適当に clearfixクラスを作って 親要素に追加してあげる
<div class="main-body clearfix">
.clearfix::after { content: ''; display: block; clear: both; }
clear
floatのright left 両方を解除する もし、clear: rightなら右側だけ
::after
その要素の末尾に、擬似的に要素を追加する
contentが必要
content '';
だと空
display: block;
空の疑似要素で埋めてします