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）…