- ベストアンサー
float の clear
CSS によるレイアウトを試しています。 float を中断したいときにはその次の要素で clear=left|right する、というのは理解したのですが、この clear, 要素のネストを無視するのでしょうか。 たとえば次のソース <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>File Browser</title> <style type="text/css"> <!-- #leftside { background-color: #66FF00; float: left; width: 120px; height: 120px; } #rightside { background-color: #33CC99; margin-left: 120px; } #navlink .boxrow { float: left; height: 30px; width: 120px; background-color: #CC9999; margin: 5px; } #content { background-color: #CCFF99; height: 300px; clear: left; } --> </style> </head> <body> <div id="leftside"> </div> <div id="rightside"> <div id="navlink"> <div class="boxrow"></div> <div class="boxrow"></div> <div class="boxrow"></div> </div> <div id="content"> </div> </div> </body> </html> （rightside の要素の中なので）content の clear により navlink の直下に配置されて欲しいのですが、leftside の float まで clear してしまっているようです。 親の要素の中だけで clear することはできないのでしょうか？
- みんなの回答 （4）
- 専門家の回答
質問者が選んだベストアンサー
#navlink .boxrow というセレクタの書き方だと、<div id="navlink">の中の<div class="boxrow">に対する指定になります。 <div id="navlink">に対してfloat: left;を指定しているわけではないです。 <div id="content">が<div id="navlink">内にあるならclearの必要あると思いますが（<div class="boxrow">へのfloat指定が影響するので）、<div id="navlink">で一旦まとめてますよね… ＞content の clear により navlinkの直下に配置されて欲しい この場合は通常の流れになるので、clearする必要ないような気がするんですけども。 clear: left;外して#navlinkに高さを入れたらどうでしょう。 参考までに 「floatは「回り込み」ではない」 http://mb.blog7.fc2.com/blog-entry-61.html 「clearは「floatの解除」ではない」 http://mb.blog7.fc2.com/blog-entry-62.html
その他の回答 (3)
- leap_day
- ベストアンサー率60% (338/561)
こんにちは 『typeC-2』のことですね・・・ すみません、いつも『typeA-1』か『typeA-1』の応用でbody width指定か大枠のwidth指定でやってるのでそこまで考慮していませんでした（ー－；） width指定せずに可変ということであれば『positionにabsoluteを使った段組サンプル。ウィンドウの幅に合わせる。幅 : 100%』の応用になるかと思います #rightside { background-color: #33CC99; position:absolute; left:120px; } ※どちらにしてもnavlink内.boxrowでfloatを使用しているのでどこかでwidth指定しないと500px以下位になるとレイアウトは多少崩れてしまうと思いますが・・・ >clear:left;ではnavilinkのfloat:left;しか解除していない これは自分のサンプルについてです leftside | rightside--navlink となっていてfloatしている(rightside)中のfloat(navlink)を解除してleftside,rightsideのfloatは解除していません 一方質問者様の方は <div style="float:left; height:150px; width:150px;background-color:red;">a</div> <div style="background-color:yellow;"> <div style="width:100px;float:left; background-color:pink;">b</div> <div style="height:200px;clear:both;background-color:blue;">c</div> </div> という状態になっていてclear:left;はnavlinkではなくleftsideのfloat解除になっています(赤よりピンクの方が下であればまた違います) ※まぁ、positionを使ったら使ったで高さが取れなのでfooterなどを作るときに<div style="height:***px;"></div>などのようにposition分の高さを空項目で擬似取得したりして一工夫しなければいけないですけど・・・
お礼
leap_day さん、フォローありがとうございます。 >positionにabsoluteを使った段組サンプル。ウィンドウの幅に合わせる 個人的にあまり絶対位置を使ったレイアウトは（必要がなければ）好きじゃないんです。ウェブブラウザに要素の内容による領域の伸縮を任せつつ、ある程度のレイアウトを実現したいと思っていますので... なんにせよ、問題は解決しました。お付き合いありがとうございました。また懲りずに質問すると思いますので、そのときはよろしくお願いします(^^
- leap_day
- ベストアンサー率60% (338/561)
こんにちは #leftsideのみfloatして#rightsideはfloatしてない為になってると思います #rightsideにもfloat:left;を付けてください ※その際にはmargin-left:120px;がいらなくなります ※ちなみにこのclear:left;ではnavilinkのfloat:left;しか解除していないので文書全体の高さは取れていないので全体のfloat解除しておく必要があります(IEはrightsideのwidthを残り幅を100％で取っているので下に落ちますけど・・・) <div id="content"> </div> </div> →ここに文書を追加するのであればの話です← </body> <body> <div id="leftside"> ・・・・ <div id="content"></div> </div> <div style="clear:both;"></div> →ここに文書を追加するのであればの話です← </body>
補足
#rightside の幅はウィンドウの幅に応じて可変としたいので、float にはできないのです。 また、 http://desperadoes.biz/style/dan/ というページもあり、左幅固定右幅固定の場合、IE 以外を考慮すると右要素に float は使わないほうがいいのではないのでしょうか？ わからないのは、 >clear:left;ではnavilinkのfloat:left;しか解除していない のに、なぜ leftside の float まで clear したようになってしまうか、なのです。
- 神崎 渉瑠（@taloo）
- ベストアンサー率44% (1016/2280)
clear:leftはそのエレメントより上に書かれているfloatをクリアします。 navlinkより上のfloatだけをクリアしたいならnavlinkの直上でclearしてください。
補足
>そのエレメントより上に書かれているfloatをクリアします。 エレメントの親子関係に関係なく、それ以前の float 全て、ということでしょうか？ >navlinkより上のfloatだけをクリアしたい というわけではなく、左右に段組というレイアウトは保ったまま、rightside 内部だけで（boxrow の float だけを） clear したいと思っています。 う～ん、仕様に文句言ってもしょうがないですけど、もし clear が親子のネストを無視するなら、CSS によるレイアウトってかなり扱いづらいのではないでしょうか…
お礼
Muller3 さん、フォローありがとうございます。 >#navlinkに高さを入れたらどうでしょう。 これがビンゴでした。 #navlink の中の .boxrow がすべてフロートで、高さが全くなかったため、その次の要素 #content が .boxrow によって押しのけられていたようです。 親要素その子要素のフロートの高さに満たない場合、親要素の次の要素までフロートが効いてしまうのですね。 それと、「フロートしたらクリアしなければならない」との思い込みが今回さらに混乱した原因となりました。