空タグを挿入してる人必見！最も簡単にclearfixができる方法

これが最も簡単で無難なclearの方法だ！！！

毎日１記事の更新を目標に記事を書いています。
今日はまだ書いていません。
 

タイムリミットまであと１時間切っているので今日はパパッと書けるネタを書きたいと思います。
 

こないだ知って目から鱗だった情報があります。
floatを使ったときのclearの手法についてです。

clearfixという疑似クラス:afterを使って行うものが１番ポピュラーなのではないでしょうか。
 

私の場合は毎回空タグを挿入するというやり方でクリアーしていました。
こんな感じです。

<style>
.left {
   float:left;
}
.right {
   float:right;
}
.clear {
   clear:both;
}
</style>

<div class="left"></div>
<div class="right"></div>
<div class="clear"></div>

余分なタグが入るのであまりよろしくないのは分かっているのですが、こっちのが手間がかからないので気に入ってました。
ただ、先日たまたまこんな言葉を目にしました。

<style>
.left {
   float:left;
}
.right {
   float:right;
}
.content {
   overflow:hidden;
}
</style>

<div class="content">
<div class="left"></div>
<div class="right"></div>
</div>

本当かと思って試してみると見事にclearできました。
これなら余分なタグを挟まなくていいので、今後はこの手法を使っていこうと思います。
 

float要素のclearで悩んでいた方はぜひともお試しくださいな。

※１0分でかけた！！