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

UPDATE:2013年11月12日

clearfixをする最もよい方法

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

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

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

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

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

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

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

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

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

親要素にoverflow:hiddenをかければクリアーできる
<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で悩んでいた方はぜひともお試しくださいな。

※10分でかけた!!

Recommend Post

Comment

コメントを残す

About me

@drox_um
25歳の2年目フロントエンドエンジニア。WEBと音楽が好き。最近カメラを買いました。お仕事募集中。

Ranking