※ ChatGPTを利用し、要約された質問です（原文：floatをfooterに指定すると正しく表示ができない。）
floatをfooterに指定すると正しく表示ができない
このQ&Aのポイント
画像の(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を指定しないのと指定後解除するのとで同様の結果が得られずに違った結果になるのでしょうか？わかる方いらっしゃいましたら回答宜しくお願い致します。
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>
お礼
回答有難う御座います。 (1)良く理解することが出来ました。 参照：floatのshrink-to-fit（フィットするように縮む） http://gyauza.egoism.jp/clip/archives/2007/04/float-css-width-auto/ (2)の場合で、footerの幅＋ボーダー幅＝wrapperの幅にするにはfooterにfloat指定をしないのが大事ということがわかりました。理由はfloat指定してしまうと回答内容の(1)(2)のようにshrink-to-fitかwrapperの幅からはみ出してしまうからです。
補足
非置換要素… img とか objectとかフォームのコントロール系とか以外のもののこと 参照：非置換要素 http://terkel.jp/archives/2009/06/floating-nonreplaced-elements-without-explicit-width/