HTMLのCSS(float)の設定がよくわかりません
- HTMLのCSS(float)設定に関する質問です。footerのCSSを指定すると、wrapperの外枠に隙間ができてしまう理由を教えてください。
- footerのCSSを変更したら、ボーダーも隙間もなく正常に表示されました。
- HTMLのコードにはwrapper、container、left、right、footerの要素が設定されています。
- ベストアンサー
HTMLのCSS(float)の設定がよくわかりません
HTMLのCSS(float)の設定がよくわかりません 画像のように各配置はうまく表示されているのですが footerのCSSを #footer { width: 100%; float: left; clear: both; } と表記するとwrapperのCSSで表記した外枠のボーダーが footerの前で切、footerの左横に1px～2pxの隙間が できてしまうのですが、その理由をわかる方いらっしゃいますか。 宜しくお願い致します。 footerの表記を #footer { width: 100%; clear: both; } とすると、ボーダーも1pxの隙間もなく正常に表示されます。 宜しくお願い致します。 ■HTML <html> <body> <div id="wrapper"> <div id="header"></div> <div id="container"> <div id="left"></div> <div id="right"></div> </div> <div id="footer"></div> </div> </body> </html> ■CSS #wrapper { width: 700px; border-right-width: 1px; border-left-width: 1px; border-right-style: solid; border-left-style: solid; border-right-color: #000; border-left-color: #000; } #container { overflow: hidden; } #left { float: left; } #right { float: left; } #footer { width: 100%; float: left; clear: both; } わかる方いらっしゃいましたら 宜しくお願い致します。
- aaiok
- お礼率34% (35/101)
- HTML
- 回答数7
- ありがとう数5
- みんなの回答 （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; を指定するとなぜこのような現象が起きるのか 自分で説明できない為、聞いてみました。
関連するQ&A
- floatをfooterに指定すると正しく表示ができない。
floatをfooterに指定すると正しく表示ができない。 画像の(3)のようにfooterにfloat:leftを指定しなければ綺麗に表示されるのは分かります。ところが、画像の(1)や(2)のように、footerにfloat:left;を指定して、次の行で<div style="clear:left"></div>と指定して、footerにfloat:leftを指定しなかったのと同様の処理をすると、(1)や(2)のようにwidthに対して様々な現象が起きてしまいます。 (1)はwidthを指定しない場合、width:auto;を指定した場合に見られ、(2)はwidth:100%;とした場合にwrapperよりはみ出すという現象が起きます。なぜ、floatを指定しないのと指定後解除するのとで同様の結果が得られずに違った結果になるのでしょうか？わかる方いらっしゃいましたら回答宜しくお願い致します。 以下はソースでそのままエディタに貼り付けると表示できます。 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>サンプル</title> <style type="text/css"> <!-- /* default.css */ #container { background:red; border:10px solid fuchsia; padding:10px; } #left { float: left; width: 200px; height:100px; background:yellow; } #right { float: left; border:5px #000 solid; width: 200px; height:200px; background:black; color:#FFF; } #footer { float: left; height:200px; background:blue; border:5px #000 solid; color:#FFF; } --> </style> </head> <body> <div id="wrapper">WRAPPER <div id="header">HEADER</div> <div id="container">CONTAINER <div id="left">LEFT </div> <div id="right">RIGHT </div> <br style="clear:left"/> </div> <div id="footer">FOOTER </div> <div style="clear:left"></div> </div> </body> </html>
- ベストアンサー
- HTML
- HTMLでCSSでボーダーが表示されません。
HTMLでCSSでボーダーが表示されません。 右サイドバー（right）の左にボーダーを表示させたいのですが、 画像のように文字を記述したところまでしかボーダーが表示されません。 ボーダーをfooterの上まで引きたいのですが、 わかる方いらっしゃいましたら回答宜しくお願い致します。 ■HTML <html> <body> <div id="wrapper"> <div id="header"></div> <div id="container"> <div id="left"></div> <div id="right"> <div id="right_title"></div> <div id="right_content"></div> </div> </div> <div id="footer"></div> </div> </body> </html> ■CSS #right { float: left; height: auto; } #right_title { } #right_content { border-left-width: 1px; border-left-style: solid; border-left-color: #000; }
- ベストアンサー
- HTML
- cssのfloatについて質問があります。
cssのfloatについて質問があります。 floatがなかなか理解できずに悩んでおります。 下記のようなcssがあり、同じブロック要素でも table,pなどは右に回りこみ、divボックスはfloatを指定しないと floatボックスの下に入ってしまうのをなんか理解できません。 初歩的なことかもしれませんが、 どなたかアドバイスいただけると助かります。 宜しく尾根会い致します。 <html lang="ja"> <head> <title></title> <style type="text/css"> #con { width: 800px; border: solid 1px black; } .left { width: 300px; height: 300px; float: left; border: solid 1px blue; } .right { width: 200px; height: 200px; border: solid 1px red; } table { width: 100px; height: 100px; border: solid 1px green; } p { border: solid 1px yellow; } </style> </head> <body> <div id="con"> <div class="left"> </div> <table> <tr><td>TABLE</td></tr> </table> <p>ppppp</p> <div class="right"> </div> </div> </body> </html>
- ベストアンサー
- HTML
- floatがうまくいきません。
以下のスタイルシートに設定したのですが、 #content の幅をぴったしの値 width: 640px; にするとレイアウトが崩れてしまいます。 どこが間違っているのでしょうか。 また、参考になるページがあれば教えてください。 <body> <div id="wrapper"> <div id="header"> </div> <div id="pagebody"> <div id="navigation"> </div> <div id="content"> </div> </div> <div id="footer"> </div> </div> </body> body { margin: 0; padding: 0; } #wrapper { width: 760px; border-style: solid; border-color: red; border-width: 5px; } #header { width: 750px; height: 85px; border-style: solid; border-color: blue; border-width: 5px; } #pagebody { width: 750px; height: 500px; border-style: solid; border-color: orange; border-width: 5px; } #navigation{ width: 90px; height: 490px; border-style: solid; border-color: green; border-width: 5px; float: left; } #content{ width: 636px; height: 490px; border-style: solid; border-color: yellow; border-width: 5px; } #footer{ width: 750px; height: 30px; border-style: solid; border-color: bluck; border-width: 5px; }
- 締切済み
- CSS
- float & clear
質問の概要は以下の通りです。 CSSを使用しています。 可変長な画面を作成する際に、サイドバーを「float:left」で配置して「margin-left」でメイン画面を配置します。 さらに、メイン画面の中で「float:left」と「margin-left」を使って左と右に分けます。 このとき、メイン画面の中で、回り込みを防ぐために「clear:left」を使用します。 ところが、この「clear:left」がサイドバーの長さに影響されてしまい、おかしな空白ができてしまいます。 これを防ぐ方法はありますか？ もしくは、全体的に構造がおかしいならば、ご指摘ください。 すべてのソースをコピーするのは大変なので、主要な部分だけを以下に載せます。 <html> <head> <meta http-equiv="content-style-type" content="text/css"> <style type="text/css"> <!-- body{ margin:0; } #header{ border:1px #000000 solid; } #side{ margin:10px; float:left; width:200px; border:1px #000000 solid; } #infomation{ margin:10px 10px 10px 230px; border:1px #000000 solid; } #main{ margin:10px 10px 10px 230px; border:1px #000000 solid; } #main-left{ float:left; margin:10px; width:250px; border:1px #000000 solid; } #main-right{ margin:10px 10px 10px 280px; border:1px #000000 solid; } #footer{ clear:left; border:1px #000000 solid; } .clear{ clear:left; } --!> </style> </head> <body> <div id="header"> title </div> <div id="side"> sidebar<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br> </div> <div id="infomation"> infomation </div> <div id="main"> main <div id="main-left"> main-left<br><br><br><br><br> </div> <div id="main-right"> main-right<br><br><br><br><br><br><br> </div> <div class="clear">clear</div> <div id="main-left"> main-left<br><br><br><br><br> </div> <div id="main-right"> main-right<br><br><br> </div> <div class="clear">clear</div> </div> <div id="footer">footer</div> </body> </html> 他にもいろいろ疑問点があり、「margin-left」ではなく「float:left」を２つ使用して左右の画面を表示した場合、通常は左右に分かれるのですが、右の画面の文章が長い場合に、右画面が左画面の下に移動してしまいます。 これを現象を防ぐ方法はありませんか？ 全体の横幅を固定すればできるんでしょうが、可変長の場合にうまくいきません。
- 締切済み
- HTML
- div#left {width:50%;
div#left {width:50%; float:left; border:1px solid black;} div#right {width:30%; border:1px solid red;} がfloatされません。なぜでしょうか？ <html> <head> <title>a</title> <style type="text/css"> <!-- div#left {width:50%; float:left; border:1px solid black;} div#right {width:30%; border:1px solid red;} --> </style> </head> <body> <div id="left"> left </div> <div id="right"> right </div> </body> </html> これでなぜならないのでしょうか？
- 締切済み
- HTML
- CSS(初歩的）な質問です…floatの解除
大変初歩的な質問でごめんなさい。 フローとの解除について教えて下さい。 例） <div id="main"> <div id="left"> </div> <div id="right"> </div> </div> とあり、 #main{ width : 1000px ; } #left , #right{ width : 500px; float : left ; } と、指定するとします…（ＣＳＳ、ＨＴＭＬは最低限しか書いていませんが。。。 ＨＴＭＬは4.01か、ＸＨＴＭＬあたりでお願いします。ＨＴＭＬ5はまだまだ…… このあと、#leftと#rightの次には</div>がありますが、この場合、clear : left (both);はどこに指定すればよいのでしょうか？もしくは、指定する必要が無いのでしょうか？ 大変初歩的ですがよろしくお願いいたします。
- ベストアンサー
- CSS
- 3カラムのサイトでfloatができない
３カラムのホームページを作っているのですが、 中央と右のカラムがどうしてもfloatできません。。 左カラムをfloat:leftにして、中央と右のカラムを#contentsBoxで囲ってfloat:rightさせています 【ＨＴＭＬ】 <div id="wrapper_2"><!--div id wrapper_2 START--> <div id="contentsBox"><!--div id contentsBox START--> <div id="560"><!--div id 560 START--> 中央カラム </div><!--div id 560 END--> <div id="175"><!--div id 175 START--> 右カラム </div><!--div id 175 END--> </div><!--div id contentsBox END--> <div id="205"><!--div id 205 START--> 左カラム </div><!--div id 205 END--> </div><!--div id Wrapper_2 END--> 【ＣＳＳ】 /*+++wrapper_2++++++++++++++++++++++++++*/ #wrapper_2 { width: 984px; background-color:#fff; padding: 8px; margin: 10px auto 10px auto; overflow: hidden; } /*+++contentsBox++++++++++++++++++++++++++*/ #contentsBox { width: 757px; float: right; } #contentsBox:after { height: 0; visibility: hidden; content: "."; display: block; clear: both; } /*+++左カラム+++++++++++++++++++++++++++++*/ #205{ width: 205px; margin: 0 22px 0 0; float: left; } /*+++中カラム+++++++++++++++++++++++++++++*/ #560{ width: 560px; float: left; } /*+++右カラム+++++++++++++++++++++++++++++*/ #175{ width: 175px; float: right; margin-left: 22px; } まだ勉強中なので、初歩的なミスなのかもしれませんが、 どうしても中央カラムの下に右カラムがきてしまいます。 （ドリームウィーバーで見たら、望み通りの配置になっているのですが、ブラウザでチェックすると、中央カラムの下に右カラムがきてしまいます） アドバイスいただければ嬉しいです。 よろしくお願い致します。
- ベストアンサー
- CSS
- CSS：floatを使っての段組で困っています
図のような段組をしたいのですが、ソースはあっているでしょうか？ サイトを作成しているとズレたりするので、根本的な段組が間違っているのか見て頂けると助かります。 ■HTML <body> <div id="container"> <div id="box-2">box-2</div> <div id="box-3">box-3</div> <div id="box-4">box-4</div> <div id="box-5">box-5</div> <div id="box-6">box-6</div> <div id="box-7">box-7</div> <div id="box-8">box-8</div> </div> </body> ■CSS body { margin: 0 auto 0 auto; padding: 0px; height:100%; } #container { width: 800px; } #box-2 { float: left; width: 800px; height: 30px; } #box-3 { float: left; width: 400px; height: 300px; } #box-4 { float: left; width: 400px; height: 300px; } #box-567 { clear:left; float: left; width: 800px; } #box-5 { float: left; width: 300px; height: 200px; } #box-6 { float: left; width: 300px; height: 200px; } #box-7 { float: left; width: 200px; height: 200px; } #box-8 { clear:left; width: 800px; }
- ベストアンサー
- HTML
- CSSでの質問です
初めて段組を作ってみたんですが、上の余白を無くするにはどうしたらいいのでしょうか？ ソースは以下のとおりです。 <style type="text/css"> <!-- #wrapper { width: 760px; margin: 0px auto; } #header { background-color: #9933FF; height: 50px; top: 0px; } #primary { background-color: #c7d5ed; float: right; width: 550px; margin-top: 10px; margin-bottom: 10px; } #secondary { background-color: #f9cfba; float: left; width: 200px; margin-top: 10px; margin-bottom: 10px; } #footer { clear: both; background-color: #99FFFF; height: 50px; } --> </style> </head> <body> <div id="wrapper"> <div id="header"></div> <div id="primary"> </div> <div id="secondary"> </div> <div id="footer"></div> </div> </body> </html> センタリングを維持したまま上の余白をクリアしたいのですが、何か解消法はありますか？
- 締切済み
- HTML
お礼
回答有難う御座います。 完全ではないですがよりfloatとclearについて理解が深まったと思います。footerのclear:bothは言葉で言うと「footerをrightの右側に回り込みをしないようにする（clearする）」という意味だということがわかりました。まだ不思議な体験が多く難しいですが新たに質問を別に立てて質問したいと思います。