- ベストアンサー
HTMLのCSS(float)の設定がよくわかりません
- HTMLのCSS(float)設定に関する質問です。footerのCSSを指定すると、wrapperの外枠に隙間ができてしまう理由を教えてください。
- footerのCSSを変更したら、ボーダーも隙間もなく正常に表示されました。
- HTMLのコードにはwrapper、container、left、right、footerの要素が設定されています。
- みんなの回答 （7）
- 専門家の回答
質問者が選んだベストアンサー
都合によりFinal answerとさせていただきます。上手い説明は私には出来ませんので教授にでも聞いて下さい。 -------------------------------------- 前半の回答や添付イメージは、当質問に対しての あくまで footer の説明やイメージです！ clearでfooterが解除。 （う～ん、解除という言い方が適切じゃないからか？・・・） 中盤頃から補足に対して container の説明が加わっているので 混ざっているのと説明が難しいので混乱を招いていますね。 こういう場合は、追加質問よりも質問を一旦閉じて別質問にするべきです。 -------------------------------------- footerをfloatさせてその後ろで閉じなければwrapperはfooterを把握できない。 同様にleft,rightをfloatさせてその後ろで閉じなければcontainerはleft,rightを把握できない。 floatは浮いている状態で、clearしたらclearのブロックが次にあるべき場所に留まれる。 最後にその留まっているブロックがあれば、外包ブロックもfloatを踏む全体を把握して囲める。 今回の場合は、container内でclearしていないのだからcontainerはleft,rightを囲めない。 ふざけた発想だけど、</CSS:float>の意味をclearと覚えても良いかもｗ 同じ事を書きますが、 解除は right を解除したというよりfooter自身を解除したとか、 元に戻したと理解するのが正解。 ※ IE以外でDIVに枠線や背景色をつければ単純に理解出来る。 最初の質問のCSSを以下に変更して（divにも文章を入れて） IE以外で containerを確認。rightの後に１文字でも入れてみても良いし。 container は何処にあるの？ rightを解除したと思っているのなら大間違い。 #container { background:red; border:2px solid fuchsia; } #left { float: left; width: 200px; background:yellow; } #right { float: left; width: 200px; background:black; } #footer { clear: both; } -------------------------------------- 論ずるよりも実際に何度も失敗や不思議な経験する方が良い。 理解させれない説明で申し訳ない。
その他の回答 (6)
- naokita
- ベストアンサー率57% (1008/1745)
NO.2.3.4.5です。 補足・お礼拝見済み。 -------------------------------------- （１） ＞floatを解除されるのではないでしょうか？ wrapper内で footer を解除したからその外包のwrapperが閉じる。 しかし、container内では解除していないのだから container に対しての left,right は浮いた状態。 （先の wrapper に対しての Footer と同じ原理） 説明の仕方が難しいけど、 解除は right を解除したというよりfooter自身を解除したとか、 元に戻したと理解するのが正解。 だから、rightも rightの後に続くものも、float するので、 container の</div>も閉じれない状態。 float したら終了するところで clear で閉じるのが基本。 普通は、画像の回り込み文章にfloat を利用するから、そのあとに続く<P>で clear する想定。 float とは単純にそういう仕様。 -------------------------------------- （２） その場のHTMLの意味やデザインを考慮したり制作者の考え方次第。 空DIVも意味をなさないし、DIVの多用も宜しくないし、 HTMLとしてもおかしいが、デザイン優先なら許される範囲。 brは本来はブロックレベルではないのでclearには使えなが、 実際は便利に使える。本来の意味ではお行儀は良くないが。 ＞というhrを非表示にすることは減点対象に入りますか？ それを踏まえて、 hrをHTMLを理解したうえで利用する分には問題ない。区切りなのだから。 hiddenにしたくなければ、表示すれば良い。 各ハックも同じ。 自分でこのパターンと決めてclear する人が多いが、 自分の場合は全パターンをその時に応じて利用しているので推薦は無いｗ 目的優先を考えれば、減点とかlintは無視。 もちろん、HTMLの仕様を一切無視するのではなく、正しく理解したうえで目的のデザインを制作。臨機応変って事。 この辺を議論しても結論は出ない。人それぞれ。 -------------------------------------- （３） 一部でブラウザ非対応だったのだから３・４年前までは、誰も利用しなかった手法。 ただ、ネスケが消えた事で、この手を利用しても良いかも知れないが、 (2)の手法もあるし慣れもあって・・・ 新バージョンのブラウザで崩れたりする可能性も否定できなかったり、 正直、全ブラウザを毎回チェックするよりは、現行で確かな手法を使うだけ。 一般的に利用しないだけで、良い手法かも。 -------------------------------------- あとは、自分で検索するなり、参考書を読むなり、実験した方が、 ここで不確実な回答を待つよりは確実ですよ。 それと、机上の理論より慣れる事。 ※ IE以外でDIVに枠線や背景色をつければ単純に理解出来る。 慣れない内は毎回利用する事。 以上。頑張って下さい。
補足
回答有難うございます。 (1)のみ理解できません。 ＞＞container内では解除していないのだからcontainer に対しての left,right は浮いた状態。（先の wrapper に対しての Footer と同じ原理） 先の先の wrapper に対しての footerは、footer{float:left;}を指定している為浮いていて、wrapperの終了タグ</div>で閉じることができず、結果的にcontainerの終了タグ</div>後にwrapperの</div>がきてしまうというのは理解できるのですが、 では、footer{clear:both;}は何を解除しているのですか？回答者様に添付して頂いた画像でも、leftとrightが解除されているように見えるのですが、この解除がleftとrightにされず浮いた状態のままと回答にありましたので困惑しております。 回答宜しくお願い致します。
- naokita
- ベストアンサー率57% (1008/1745)
NO.3 追記。 これは失礼、補足の回答になっていませんでした・・・ ------------------------------------ （１）だけでは不十分。 理由：wrapperにfooterが入らないのと同様にcontainerにleft,rightが入らなくなるから。 それなら、（２）のようにcontainer内でのrightの次でclearさせる事。 （２）のclearは、NO.3で書いたように色々あるので <div 空にする必要は無い。 （３）は、Netscape7系で表示出来なかったので現在は不知。
補足
やっぱり理解してないかもしれません。 float難しいですね… 確認なのですが… (1)でfooterでclear:both;を指定すると、 footerにfloat:left;の記述がある為、 wrapperにfooterが入らないのはわかるのですが、 なぜ、footerでclear:both;を指定しているのに containerにleft,rightも入らなくなるのでしょうか。 footerでclear:both;を指定した場合、leftとrightは floatを解除されるのではないでしょうか？ (2)<div の空表記ではなく、 <hr style="visibility:hidden;clear:both;" /> <br style="clear:both;" /> を使用するということでしょうか？ (3)はNetscape7系で表示できない為非推奨ということでしょうか？ 以上ですが宜しくお願い致します。
- naokita
- ベストアンサー率57% (1008/1745)
NO.2.3 補足拝見済み。 その為のイメージ図だったのだけど、実際宙に浮くわけがないが・・・ 三次元でイメージして footer を浮かせたらどうなるでしょう？ footer が宙に浮くから wrapper の </div> で閉じようとしても 宙に浮いているから無い物として判断し、footer を把握出来ずに wrapper 内に footer を捉えられず footer を閉じる事が出来無いから clear されている rightで閉じる。 IEでは曖昧に解釈してるから適当に表示されるけど・・・ IE以外で正規に表示。IE以外でwrapperに線や色を付ければ理解出来る。 つまり、NO.2補足での(1)で解除するだけで良い。 -------------------------------------------- >>閉じたいなら footer の次に clear させる事 >footerのCSSもしくはfooterの前に空の<div id=""></div> >を作りclear:both;を指定するのではないのでしょうか。 それは、 footer の前の話ではないのかな？ 当質問は下部の枠線の事でしょ？？？ >閉じたいなら footer の次に clear させる事 と回答したのは、質問の footer 部分の次の話であって、 left,rightの話ではなく、left,right を footer で解除したのと同じように footer の次にブロック＆clear で解除設定してやれば、 wrapper内に footer を含む事ができて枠線も付くって仮定。 つまり、footer の次にコンテンツを置くか、何も無いなら <hr style="visibility:hidden;clear:both;" /> <br style="clear:both;" /> clearfixとか<div><hr /></div>のスターハックとか色々あって設定は考え方による。 ----------------------------------------------- ＞footerに誤ってfloat: left;を指定してしまって この疑問は、余計な事をして余計な壁にぶち当たっているだけで そもそも、そのような余計な float など利用しない...蛇足。 誤ったのなら、更にCSSを追加するのではなく、誤った箇所を削除した方が良い。 ブラウザも誤った指定をIEのように誤解釈で表示させる義理もなでしょうしｗ
お礼
素晴らしい回答有難うございます。 画像を添付して下さってイメージが分かりました。 いわば、floatは画像ソフトのレイヤーのような ものということもわかりました。 floatは必ずclearするということや footerがfloat指定の為、浮いている状態で wrapperの終了タグ</div>で終了できない ということも理解できました。 footerでfloatを指定したら 次にclearしなければならない ということも理解できました。 一つ質問なのですがclearする際に <hr style="visibility:hidden;clear:both;" /> というhrを非表示にすることは減点対象に入りますか？ 宜しければ宜しくお願い致します。
- naokita
- ベストアンサー率57% (1008/1745)
NO.2です。補足拝見済み。 宙に浮いている状態だから。 float させたら clear で閉じなければ、 wrapper が clear の位置までしか留まってくれない。 wrapper に色をつければ border だけではないことがわかるでしょ？ 閉じたいなら footer の次に clear させる事。
補足
回答有難う御座います。 >宙に浮いている というのが何がどのようになっていること というイメージが分かりません。 >閉じたいなら footer の次に clear させる事 footerのCSSもしくはfooterの前に空の<div id=""></div> を作りclear:both;を指定するのではないのでしょうか。 以下にまとめてみたのですが正しいでしょうか。 clearで閉じていない場合、footerにfloat:left;を 指定していた場合、ボックスのrightの右にfooterが 表示される。 そこで、clearを使用し、footerがボックスのrightの 右側に表示されないように、floatを解除する。 その方法として、 (1)containerの終了タグ</div>の直後の footerのCSSでclear:both;と記述し解除する。 (2)containerの終了タグ</div>の直前に <div class="clear"></div>を記述しCSSに .clear {clear:both;}と記述しfloatを解除する。 但し、空タグなので減点対象。 (3)float指定したボックスleftとrightの 親要素のcontainerのCSSにoverflow: hidden; を記述し解除する。 (3)はなぜoverflow: hidden;を指定したら floatが解除されるのかわかりません。 もしお分かりでしたらご回答宜しくお願い致します。 以上ですが合っていますでしょうか…。
- naokita
- ベストアンサー率57% (1008/1745)
何故、footerをfloatさせてるのか疑問・・・ ---------------------------------------- #footer { width: 100%; /* float: left; */ clear: both; }
補足
回答有難う御座います 自分でも疑問ですが、 footerに誤ってfloat: left;を指定してしまって 質問にある現象が起きてしまったのはいいですが、 何故このようになるのか自分で説明することができなかった為 こちらで聞いてみました。 もし分かるのであれば是非教えてください。
プラウザの仕様かも、それで何で開いてるのでしょうか？ 違うプラウザで開いたら思った通りに表示できるとかですが、表示がおかしいプラウザのソース直したら、今度は巧く表示されてたプラウザの表示が変になる・・・なんて有り勝ち。
補足
回答有難う御座います ブラウザはIEです。 float: left; を指定するとなぜこのような現象が起きるのか 自分で説明できない為、聞いてみました。
お礼
回答有難う御座います。 完全ではないですがよりfloatとclearについて理解が深まったと思います。footerのclear:bothは言葉で言うと「footerをrightの右側に回り込みをしないようにする（clearする）」という意味だということがわかりました。まだ不思議な体験が多く難しいですが新たに質問を別に立てて質問したいと思います。