vanillaice (Akira)

vanillaice (Akira)

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

class="clearfix"

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

floatの本質は「回り込み」ではない

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

何故float解除が必要なのか

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

例1)

  • 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

There are no comments yet.
ユキ  
質問です

こんにちは。
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テンプレート ご利用時のお願い