hamayuzinの日記

エンジニアとかデータサイエンティストとかやってます。あの時 あれやってたな的な備忘録にできれば。

【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;

空の疑似要素で埋めてします