ベストアンサー

floatのclearについて理解できません

2009/03/29 02:12

floatをclearするということについてですが、 clearとすることで、クリアランス領域が生まれて流し込みが解除されるということまでわかりました。だいたいの場合、clear:both; と書いてしまいますが、right,leftとするときはどんな場合なのでしょうか？ floatがうまくゆかない事が多く、clearをマスターしたいと思っています。購入したいくつかの参考書でもその部分が不明で、ネット検索でもイマイチ理解できませんでした。漠然とした質問になっているような気もしますが、よろしくお願いします。

takeetakee
お礼率66% (96/144)

HTML
回答数4
ありがとう数5

みんなの回答 （4）
専門家の回答

質問者が選んだベストアンサー

ベストアンサー

12345963
ベストアンサー率55% (11/20)

2009/03/29 21:54 回答No.4

float:left;を使ったら、clear:left;でもｏｋ float:right;を使ったらclear:rightでもＯＫ両方使っていて、両方解除したければ、clear:both;でｏＫ両方使っていても、解除したいのが片方だけなら、clear:bothはＮＧ clearすると親ボックスの領域にclearされる。ＯＫ？で、bothは両方なので、仮にleftしか使っていなくても、有効。同じくrightのみしか使ってなくても有効。で、多くの人は、bothを使う。ココ重要。一度、上のことを実際に試されてはいかが？より、実感できると思いますよ。

質問者

お礼 2009/04/01 01:54

よくわかりました。どうもありがとうございました。

その他の回答 (3)

noname#100277

2009/03/29 16:30 回答No.3

画像を左右どちらかに配置した場合、以下に続く文字列の表示位置を「clear」する迄は回り込みを解除しませんよと云う意味。 clearした場合は画像の位置に対して同じ位置を指定して記述した場合は、正常に回り込みが解除される。

質問者

お礼 2009/04/01 01:59

どうもありがとうございます。

suzuko
ベストアンサー率38% (1112/2922)

2009/03/29 11:07 回答No.2

floatを多用する場合、floatした直後にclearを毎回すればいいのでしょうが（その場合、clear:right；,clear:left；となりますね）結構忘れてしまうことが多いので、floatを必要としなくなった時点で、clear:both;と打ってます。その方がコードも短いですし。みなさんそうなのでは？^^;

質問者

お礼 2009/04/01 02:00

floatを必要としなくなった時点で、clear:both; とりあえず、こう覚えておけばいいんですね＾＾どうもありがとうございます。

Seravy
ベストアンサー率47% (118/249)

2009/03/29 03:13 回答No.1

そのまま、右（または左）のfloatだけ解除したい場合に使います。

関連するQ&A

floatとclear
ボックスが３つあって、一つ目にfloa rightをし、２つ目にfloat leftをして、３つ目のボックスでfloatを解除する場合、clearはleftだけでいいですか？ rightは２つ目のfloat leftで解除されていますか？
- 締切済み
- CSS
floatのクリアについて
以下のように「test1」,「test2」というclassを「test」の中で左右に配置したのですが、一番最後のh2にあるclassのclearが反映されずfloatを解除することが出来ません。（IEの７では解除できましたが、FireFoxの 3.0.11での解除が出来ません）「test」の</div>直前に<br class="test3" />を入れると解除されるのですが、<br>を使わずに解除する方法はありますでしょうか？現在の希望は以下の方法での解除か、「test1」にclearを設定し「test」を下に続けて並べたいと考えています。ご教授よろしくお願いします。 ■■■HTML■■■ <div id="test"> 　　　<div class="test1"> 　　　　　　<img src="画像" width="100" height="100" /> 　　　</div> 　　　<div class="test2"> 　　　　　　<p>test2</p> 　　　</div> </div> <h2 class="test3">test</h2> ■■■CSS■■■ #test { width: 500px; margin: 0 0 20px 0; } .test1 { float: left; width: 100px; margin: 0 10px; padding: 0; } .test2 { float: left; width: 380px; margin: 0; padding: 0; } .test3 { width: 500px; clear: both; }
- 締切済み
- HTML
clear:bothなしで解除！？
http://www.monexgroup.jp/ こちらのサイトのロゴにはfloat:left; よくある質問、お問い合わせにfloat:right; English 中文みにfloat:right; の設定がされていますが、その後にclear:both; の記述がどこにもされていないのですが、どうやって回り込み解除なされてるのでしょうか？探っていたのですが、まったくわかりません；分かる方、どうかご教授お願いいたします＞＜；
- ベストアンサー
- HTML
floatとclear:bothで困っています
こんにちは、検索をしたのですが、問題が解決しなかったので、質問させて頂きます。 HPを制作中で、sidebarをページの右側につけたいのですが、そのことについて困っています。 sidebar内容をページの右側にレイアウトさせたく、HTML上、div id=sidebarで処理していますが、 #sidebar{ float:right; } を使用すると、bodyの範囲がheaderまでで止まります。 (firebugにてチェック済み) floatをつけた際に、clear:both;を必ずかけなければいけないということを知り、 #sidebar{ float:right; clear:both; } をかけても上記と同じ現象が起きます。当たり前かもしれませんが、 #sidebar{ clear:both; } のみですと、bodyが全範囲に反映されます。これが原因でページが制作できなく、困っています。どうすれば、sidebar内容(img)が右側にいき、尚且つ、bodyが全範囲に反映されるのでしょうか？同じような質問が過去にあれば申し訳ございません。宜しくお願い致します。
- ベストアンサー
- 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
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">  </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 することはできないのでしょうか？
- ベストアンサー
- HTML
CSSのfloatの回り込み解除について
現在は、<dt>にfloat:leftを指定して、.clearを作成し、<div class="clear"></div>で解除しています。ただ最近floatを頻繁に使うようになり、<div class="clear">が多くなってしまいどうにかならないか探しているところです。私がやりたい事は、<dl>に直接clear属性を付属できないかです。これができれば、回り込み解除の指定がいらなくなるので、助かるのですが、<dl>に入れると、<dt>のfloatも解除されてしまいます。下記がサンプルソースです。 CSS： dl {clear:both;} dt {float:left;width:130px;border:solid 1px #CCC;} HTML <dl> <dt>SAMPLE</dt> <dt>SAMPLE</dt> <dt>SAMPLE</dt> </dl> <p>clearを設置しなくても回り込み解除</p> これが理想です。やはり、clearは別で設置しなければならないんでしょうか？
- ベストアンサー
- HTML
コーディングで「float」のclearの仕方
htmlとcssのコーディングに関して質問させてください。右側と左側にボックスをフロートさせた際、どうやって回り込みを解除したらよいのか教えてください。 ▼htmlのタグ <div id="left">......</div> <div id="right">......</div> ▼cssのタグ #left{float:left; width:100px;} #right{float:right; width:100px;} このようなコーディングをした際には、 html、もしくはcssのどちらに、どのようなタグを追加して回り込みをなくしたらよろしいでしょうか？分かりにくいかもしれませんがご教授いただければ幸いです。
- 締切済み
- その他([技術者向] コンピューター)
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
clear:both;を単体で指定
float:leftなどで回りこみを設定しました。その設定をclear:both;で解除する時に、インライン要素で指定したいです。例えば、<div style="clear:both;"></div>で単体ですが、ブロックレベル要素です。インライン要素で指定できますか？<span>ですと、解除できません。 <div style="float:left;">A</div> <div>B</div> <div>C</div> Cを回りこみさせたくないので、BとCの間にclear:both;を指定したいです。 <div style="clear:both;">C</div>ではない方法をお願いします。
- ベストアンサー
- CSS

floatのclearについて理解できません