結局floatはどう解除するのが簡単なのか

こういうのが float というやつですが ↓ (文章はダミーです)

パソコンから閲覧されている方は少しブラウザ幅を小さくして頂いた方がわかりやすいかと思います。今回は【各個人ユーザーが記事を作成する際に利用したfloatの解除】についてです。テンプレートの方でなく (´・ω・｀)
やっぱり拝見しますと、どうしても 解除 を忘れてしまう方が多いんですね。
理由としては

• 根本的にfloatの性質を理解していない
• 難しい
• 忘れちゃう

目に見えて崩れるようなことが無ければfloat解除を忘れてしまうことがありますね。あるいは「崩れてないからいっか」と判断してしまう。解除していないにも関わらず崩れていないのは

• テンプレートで予防策を取ってある(テンプレ製作者さんの親切心) ← この点で私は不親切製作者です(笑)
• 後続要素が無い

こんなところでしょうか。
floatというのは 後続の要素に必ず影響を及ぼします。 なので確実に解除すべき性質のものです。その「解除方法」について、どうするのが一番簡単なのかを考えてみた。

先に結論を言ってしまえば overflow: hidden; を使うのが良いと思うよ (´・ω・｀)
でもって、本記事の主旨というのは テンプレートの独自クラスなどに頼らない ことを目的としています。何故なら独自クラスというのは テンプレートを変更してしまったら機能が失われてしまう からです。だからなるべく避けた方が良いですね。

画像に枠やシャドウが付かなくなった、ぐらいならどうってことありませんが、floatが解除されないなんてのは大変。場合によってはページレイアウトが崩壊します。またはfloat自体が適用されなくなるか(解除だけでなくfloatそのものを独自クラス化している場合)
なのでfloatに関しては独自クラス反対派です。ワタクシは (´・ω・｀)
記事内で全て済ませてしまえばテンプレ変更時でもその内容は生き残ります。

floatを解除しなければいけない理由

高さが出ないから です。 float = 浮動化
した要素は高さが出ませんので、後続要素がfloat要素と重なってしまうわけです。何故？どうして？の理由の一番はこれですので、まずここを理解しておかないと何をすれば良いのかがわかりません。理由がわかれば目的がわかる。目的がわかれば方法を探せる。ってやつです。これは全てのお勉強の基本ですね。

昔ながらの方法① brタグのclear属性

一昔前だとこんな感じですね ↓

<img src="画像アドレス" alt="" style="float: left;">文章<br clear="both">

文章をpタグやdivタグで挟んで <p>文章</p> のように製作している場合もあるかと思いますが、文章だけなら別段必要なし。…とここでは言っておきます。pタグは頻出タグですが使い方が難しいと思います。なので初心者の自覚がある方へは無理に使用を勧めない。

brタグ の clear属性 の値に both (あるいは left or right) を指定。

で、このclear属性ですが、 html5では既に廃止されております。 廃止要素を利用して得することは何一つありませんので、現web標準であるhtml5を意識する方は 使わない。廃止の理由は「そんなのCSSでやれよ。」ってことです。なにせhtml5の大きな指針は「装飾はhtmlですんなし！CSS使いなはれや！」なので。いわゆる「文章の回り込み」も「装飾」にあたります。

* でもfloatの動作や性質のことを「回り込み」などといういい加減な対訳で覚えない方が良いですよ。理由は以下の記事で

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

float(フロート)解除についてよくある間違い class="clearfix" って書いたらフロート解除完了！ ではありません。 というのがが当該記事内容です。 とてもよく見かけますが、クラス名を指定しただけで魔法のようにフロートが解除されようはずがありません。...

vanillaice000.blog.fc2.com

昔ながらの方法② 後続要素に clearプロパティ

方法①の方はhtmlのclear属性です。こちらはCSSのclearプロパティ。ややこしいね (´・ω・｀)
使い方はこんな感じ ↓

<img src="画像アドレス" alt="" style="float: left;">文章

<p style="clear: both;">後続要素(文章など)</p>

これだと例えばその「後続要素」がテキストのみだったとしても、pやdivなどのタグで囲う必要があります。じゃあ後続要素が無い場合はどーすんの？その場合にはこの方法は使えませんね。

イマドキの解除法 clearfix

clearfix というのはhtmlタグ名, 属性名などでもなく、CSSプロパティでもありません。手法の名称です。CSSを用いた一連の調整方法を「clearfix」と言います。
(CSSでの方法全般をそう呼ぶのではなく、CSS操作での手法のひとつがclearfixと名付けられた、という意味です)

実際の動作は「float解除」というよりも、「floatが影響しない位置まで高さ調節をする」といった感じです。内容については前々章に掲載したリンク先でご確認頂くとして。この方法を取るならばスタイルシートの存在が必須です。つまり 記事内では処理ができない。 ということで、独自クラス です。

独自クラスは一旦利用すると、その装飾を維持するためにCSS内容を恒久的に移植し続ける必要があります。簡単に言うと、テンプレートを変えた時は該当独自クラスもコピペしなきゃいけないよ、ってことですね。それが意外とめんどっちいんですよねぇ (´・ω・｀)

それから、最近のテンプレートはfloat解除にこの方法を取っていることが多いんですね。これまでの私のテンプレートも全てそうですし。ということは、clearfixの内容が既にテンプレートCSSに含まれている ことがほとんどです。記事内でのfloat解除を行うためにわざわざサイトで調べて追加をする方をよくみかけますが、実際には既にテンプレ内容に含まれているため 内容重複 の形になってます。これは全くの 無駄 (´・ω・｀)

ですからテンプレート内にあるclearfixをそのまま使えば良いわけですが…。テンプレート製作者によってクラス名がまちまちです。 私は cf という名称にしていますが、ある方は clearfix かもしれないし、ある方は float-clear かもしれないし。なにせ独自に付ける名称ですから予測が立ちません。クラス名は 一文字でも違えば全く別の物 すので、テンプレート内のクラス名を利用した場合には結局別テンプレートに変更したら無効化されることに。無効化が嫌なら移設。移設したら重複。負のループ （￣∀￣；）

clearfixについては「使わない方が良い理由」ではなく、「使用した際の注意点」ということにしておきます。clearfix自体は昨今主流の方法で大変優れた方法ですので内容的におすすめしない理由が見当たらない。あくまでも作業面で面倒が生じるという意味でおすすめしない、という感じで捉えて頂けると良いかな、と。この記事の主旨は「スタイルシートに頼らずに記事内で全て補完しようず。」なのです。

一番簡単なのは親要素に overflow: hidden;

結局これが一番簡素で手っ取り早く済むんじゃないかと思ふ (´・ω・｀)

overflow というCSSプロパティは 範囲からはみ出したモノに対しどういった処理を行うか を指定するものです。一番伝わりやすいのは スクロールボックス ですかね。こういうの ↓

スクロールボックスは overflowプロパティの値を auto あるいは scroll に指定することで可能になります。

で、この overflowプロパティは 初期値である visible 以外の値の時、浮動化ボックスも高さ計算に加える という仕様になっています。前章のclearfixと同様に「高さを出す」ことで、以降のfloatによる影響を無効化する方法。
(tableも同じような性質を持ってますので、clearfixに用いるdisplay値はtableになってます)
記事内だけで処理(つまり記事編集中に処理を済ませる)場合にはこれを利用すると良いんじゃないか、という提案です。

サンプル

紫のボックス1は float: left;
赤のボックス2も float: left;
を指定しています。続く緑のボックスは float の影響を受けないように解除を行って、紫・赤 両ボックスの直下に置いています。ということは、紫と赤の配置が終わったらfloat解除を行わなければいけません。解除しないとこうなります ↓ (スクショ)

★ 紫ボックス/ 赤ボックス

<div style="width: 120px; height: 120px;"></div>

テキストなど細かい部分は省いてます。

★ 緑ボックス

<div style="width: 300px; height: 100px;"></div>

width と height が違うだけです。

紫・赤・緑 の3つのボックスは displayプロパティの初期値が block です。display: block; の要素はそのままでは 横に並べることはできません。そこで横に並べるひとつの方法として float が選択されます。

★ 紫と赤を横並びにする

<div style="width: 120px; height: 120px; float: left;"></div>
<div style="width: 120px; height: 120px; float: left;"></div>

ひとつめのdiv要素が「紫」ふたつめのdiv要素が「赤」floatで左詰めに並びます。ちなみに「赤」のfloatプロパティに right を指定するとこう ↓

横に並びつつ左右に分かれます。

紫・赤のふたつがこれで横に並びました。緑は横に並べたくないので、緑を配置する前にfloatを解除します

<div style="overflow: hidden;">
  <div style="width: 120px; height: 120px;"></div>
  <div style="width: 120px; height: 120px;"></div>
</div>

floatの対象となっている要素を全て div で挟んで、そこに overflow: hidden; を指定します。専門的な言葉で表すと

紫と赤は 兄弟 です。この兄弟を包括しているのが 親。親から見ると紫・赤の兄弟は共に 子 です。ということでひとつ要素が増えますが、この程度はめんどくさがらずにしっかり追加します。こうしておいてから緑ボックスの内容を書く、と。

<div style="overflow: hidden;">
  <div style="width: 120px; height: 120px;"></div>
  <div style="width: 120px; height: 120px;"></div>
</div>
<div style="width: 300px; height: 100px;"></div>

この方法を取ればわざわざスタイルシートに独自クラスとして記載する必要もないのではないでしょうか。記事を書く際に親要素に <div class="clearfix"> って書くのと。<div style="overflow: hidden;"> って書くのと。労力としては大差ないと思います。辞書登録すれば良いだけだし (´・ω・｀)

ここから以降の内容は記事内でfloatを扱う際の注意点やコツ。

floatが一旦途切れるならば逐一解除を

例えばこんな ↓

Ius et postulant efficiantur. Vel ad malis honestatis concludaturque, has cu placerat invidunt, te pri tation dolore. Sit doming putant honestatis ei, cetero audire praesent pro at, aperiam vivendum no ius. No duo suscipit intellegat inciderint. Ex his possim eligendi salutatus, vero ubique efficiendi vim eu. Veri vocent cotidieque eum ex.

水色背景部分2箇所はそれぞれfloatレイアウトです(画像 + テキスト)
間に挟まれたピンク背景部分はfloatとは無関係。floatの影響を受けたくない部分。こういう場合に「また後でfloatするから…。」という理由で解除を怠る方が結構多いのですが。最初の水色部分が終わったら解除。ピンク部分を書き、また2度目の水色部分で改めてfloat開始、終わったら解除。すごくめんどっちいかもしれませんが、「後からどーせまたやるし」的放置はNGです。画像 + テキスト の組み合わせの場合には一見して問題が出てこないこともあって、こういったパターンで書いてしまう方が多いのだと思いますけれど。

pタグを安易に利用しない

これはfloatに限ったことではないのですが。例えば上の分割floatのサンプルの場合、文章をpタグで囲うのは間違いではありません。pは「段落」ですから文章を挟むためのもの。ですが例えば overflow: hidden; を指定すべき親要素にpタグは ダメ です。pタグというのは入れ子できるタグがかなり限定されていて、divやpなども中に入れることはできません。そして引き起こされたエラーが目に見えてレイアウトに影響を与えるのもpタグの特徴です。

pタグは終了タグの </p> を「省略しても良い」という決まりになってます。省略するとどうなるかというと、然るべき位置・正しいと思われる位置にブラウザが自動補完を行います。入れ子が間違っているなどのミスが生じた場合、本来あるべき正しい位置に勝手に(という表現はふさわしくないですが)終了タグを入れてしまいますので、結果的に意図した通りの見た目にならない = レイアウトが崩れる と。そういう仕組み。そもそもデザイン目的でpを利用すること自体が間違いですけどもね。デザインで使用するならば迷わず div を選択。

横並びのレイアウトはfloatだけでなく table (おすすめはしません) や inline-block や flex という選択肢もあるのですが。それはまた別の話しですので、今回はfloatで横並びを実現する際の提案でした。