The other way round

Welcome to my blog

clearfixは魔法の言葉ではありません

float(フロート)解除についてよくある間違い

class="clearfix"


って書いたらフロート解除完了!
ではありません

というのがが当該記事内容です
とてもよく見かけますが
クラス名を指定しただけで魔法のようにフロートが解除されようはずがありません


floatの仕組みについての詳細は本記事では触れません
ただfloatを「回り込み」という対訳で覚えている方へは警鐘
float = 回り込み
ではありません
特定条件下で「回り込んでいるように見える」だけであって
一方を他方に「回り込ませる」ためのプロパティではありません
floatの英単語本来の意味である
「浮く」「浮かぶ」「浮かせる」
というのが正確な表現です(自動詞・他動詞両方です)
「回り込む」特定条件下とは
画像+テキスト の組み合わせなど限定的であり二次的な結果にすぎません
float = 回り込み と覚えているからこそ本来の挙動を理解できずにミスをします

float というのはボックスを浮動化させます
浮動化するとどうなるかというと
場所を占有しなくなります
浮かんでいるので場所を保有しません
floatが指定された要素それ自体の「サイズ」は存在するものの
そのfloat要素が収まっているボックスは 子供にあたるfloat要素の大きさを認識しません

例)

  • float: left;
  • float: left;


上記の緑ボックスと青ボックスは互いに float: left; の指定があります
ソース内容は以下の通り

<ul>
<li style="float: left; width: 140px; height: 100px;">
<li style="float: left; width: 140px; height: 100px;">
</ul>


ソースからは細かい部分(背景色やテキストなど)を省いてあります
これはよく「ナビゲーション」などに使われます
緑のボックスと青のボックスはfloat指定しない限り横並びにはなりません
(display値の操作は除く)

floatが指定されているのは各々
<li>
という要素であり
その li要素は
<ul>
の子要素です
ul要素が「親」li要素が「子」という「親子関係」にあたります
ulがliを内包していますよね それが「親」です

floatを指定された子であるところの2つのボックスには
widthが140px
heightが100px
という指定があります
では親である ul の高さはいくつでしょうか
子要素を抱えており その高さが 100px
親は子を包んでいるわけだから子要素に拡げられて 100pxでしょうか
違います
答えは 0 です

floatされた要素は「浮いている」状態であり「場所を占有していない」のですから
親であるulは「子はサイズを持っていない = 居ない」という認識をします
というわけで中身には何も無い = サイズゼロ = 高さが出ない
という結果です

何故高さが出ないのか = floatが解除されていないから

高さが出ないとどうなりますか?
次に続く要素は前(上)の要素を避けて下に位置するべきところですが
上の要素に高さが無いわけですから重なってしまいます
結果 浮いている子要素の背面に配置され…

例2) floatが解除されている場合

  • float: left;
  • float: left;
後続要素



例3) floatが解除されていない場合(スクリーンショットです)




例3の方は赤い背景のボックスがありません
float要素を含むul要素の高さが無く重なってしまった(後続ブロックが浮いているfloat要素の背面に配置されてしまった)ためです
赤ボックスの高さをfloat子要素と同じ100pxに設定したのですっぽり隠れてしまっています
150pxならば下の50pxだけが顔を出します こんな風に(スクショ) ↓





だから必ずfloat解除をするんです
レイアウトを崩す大きな原因のひとつが floatの解除し忘れ です

この状態をしばしば目にするんですね
ただ重なってしまえばソースを書いた本人にもすぐわかるわけで
そこでどうするかというと

改行で無理やり空白を作ってしまう


ulの終了タグ
</ul>
の後ろに
<br>
を連打
すると当然空白行ができますから それでなんとか間に合わせている と
経験がある方もいらっしゃるのではないでしょうか(笑)
これはダメですね ダメ (´・ω・`)
レスポンシブデザインなら特にダメ
画面サイズが小さく狭くなれば当然float要素ははみ出さないよう下の行に下がります
パソコンで1行だったものが2行あるいは3行になったりします
するとbrで制作した空白行では間に合わなくなりますね 単純な物理的法則として
スマホでのナビゲーションの重なり 非常によくみかけます(笑)

そこでみなさん検索されるんです
「今時のfloat解除の仕方」がキーワードでしょうか
そしてこうします ↓

<ul class="clearfix">
<li style="float: left; width: 140px; height: 100px;">
<li style="float: left; width: 140px; height: 100px;">
</ul>


これでfloat解除を行った「つもり」になってしまう
クラス名に clearfix を振ったところで何も起こりません
CSSをお勉強されている方はもちろんおわかりでしょうが
clearfix とは「フロート解除」の一つの方法を示す英単語ですが CSSプロパティ名でもなんでもありません
ただの「任意につける名前・名称」です
クラス名を付けたのならば そのクラス名が与えられた要素の装飾指定 を別途行わないと
こんな感じでしょうかね ↓

.clearfix:before,
.clearfixf:after {
content: "";
display: table;
}

.clearfix:after {
clear: both;
}


これをスタイルシート側で定義しないと何の意味もありません
clearfix というクラス名を持つ要素に一体何を施すのか というのはCSSで指定を行わないと無意味
htmlに class="clearfix" と書いただけで何がどうなるわけではないんです

何故 clearfix という名称かと言うと
発案者が方法名として使ったからです
決してCSSプロパティとして存在しているわけではありません
サイトによっては
class="clear"
あるいは
class="float-clear"
なんてのもあるかもしれません
クラス名はどうだって良いんです
上に記載したCSS内容とクラス名が合致すればそれでOK


クラス名を書いただけじゃダメ!
CSS内容を併せて記載しないと!


ということです 実際

・ float解除なし brで無理やり高さ出し
・クラス名 clearfix がhtml側にあり CSSには .clearfix の定義が何も無い

これらは本当によく目にします
最後に本末転倒ですが
私のテンプレについてはclearfixの定義が既にありますので わざわざ新たに組み込む必要はありません
floatの親要素に

class="cf"


これでOKです
関連記事

Comments 3

ユキ  
質問です

こんにちは。
Juvenileのテンプレートを使用しているのですが、カスタマイズをしたら、ホームにてブログタイトル下の自動的に表示される写真や個別記事トップに表示される写真が表示されなくなってしまいました。
背景色などを白ばかりにしてしまったためかもしれません。
でもどこをどう戻せばいいのかわかりません。
そして、ヘッダーを画像にするにはどうすればいいですか?
カテゴリーなどの英語のフォントを変えるにはどこを変更すればいいですか?
教えていただければ幸いです。よろしくお願いします。

2017/01/02 (Mon) 11:21 | EDIT | REPLY |   
ユキ  
再びすみません。

すいません、ヘッダーの件は解決いたしました。
トップの自動でスライドする画像と、個別記事の画像が真っ白に設定してしまったので元に戻す方法と、トップでのCategory、など英語フォントの変更方法を教えていただければ幸いです。

2017/01/03 (Tue) 00:03 | EDIT | REPLY |   
Akira  
To ユキさん

こちらは無関係な記事ですので移動をお願いします。

http://vanillaice000.blog.fc2.com/blog-entry-452.html

お返事は移動先でさせて頂きますね。
よろしくお願いします。

2017/01/03 (Tue) 01:06 | EDIT | REPLY |   

Leave a reply

テンプレートに関するご質問・不具合のご報告の際はご自身のブログアドレス記載必須です
ご質問の前に必ずお読みください ↓
FC2テンプレート ご利用時のお願い
About this site
新テンプレ動作確認中。ご迷惑おかけします。
About me
テンプレのご質問の際には
カテゴリ > 利用上のお願い > FC2テンプレートご利用時のお願い
をご一読されましてからお願いします ( ゚Д゚)ノ
* メールでの返信をしておりません
ブログ内で必ずお返事はしておりますので
ご面倒ですがリコメの確認に再度お越しくださいね *