[CSS] 画像に対する文字の回り込み

Flexboxのおかげで、floatを使うことはほとんどなくなったけど、画像に対する文字の回り込み処理には、まだ使う感じ。afterにいわゆる clearfix を設定しています。

// 画像に対する文字の回り込み
/// 左側に画像
.img-left img {
    margin: 0 1em 1em 0;
    float: left;
}
/// 右側に画像
.img-right img {
    margin: 0 0 1em 1em;
    float: right;
}
// float 解除
.img-left::after, .img-right::after {
    content: ".";
    display: block;
    clear: both;    
    height: 0;
    visibility: hidden;
}