なるべくシンプルなcssで左floatエリアを作る

表題、オレオレレスポンシブでけっこう使うのですがすぐ忘れちゃうので備忘録。

内容的には大体この記事の焼き直しです。古いブラウザ対応などはざっくり抜いたので、厳密にやりたい場合は元記事参照したほうがいいかもしれません。ていうか最新のMacOS Safariでしか動作確認してないので注意。

コード

HTML

<div class="inner-this-area-is-float-left">
   <div>hoge</div>
   <div>fuga</div>
</div>

CSS

.inner-this-area-is-float-left > * {
    float: left;
}
.inner-this-area-is-float-left:after
{
    display: block;
    content: "";
    clear: both;
}

Sass

.inner-this-area-is-float-left {
    > * {
        float: left;
    }
    &:after
    {
        display: block;
        content: "";
        clear: both;
    }
}

補足事項

• 指定classの直下のうちタグで囲まれている要素にしかfloatはきかないので注意。
• このケースではbeforeの指定はなくていい。
• afterから「content: "";」抜いてもなんかいけた。（しつこいようですがMacOS Safariでは、の話） →よくよく確認したらいけなかったですごめんなさい。「content: ""」必要！