- ベストアンサー
CSSのfloatについて質問があります
- CSSのfloatについて理解できないと悩んでいます。同じブロック要素でもtableやpタグは右に回りこみますが、divボックスはfloatを指定しないと下に入ってしまいます。
- 初歩的なことかもしれませんが、CSSのfloatに関してアドバイスをいただきたいです。
- コードの一部を示すと、div要素にはfloatが指定されておらず、table要素やp要素にはfloatが指定されています。
- みんなの回答 （2）
- 専門家の回答
質問者が選んだベストアンサー
提示されているサンプルを見てみると、p要素はclass="left"のdiv要素と重なっていますよね。 同じようにclass="right"のdiv要素も重なっています。ただ、文字がclass="left"のdiv要素の下にきています。 floatを指定した要素は回り込むというより、浮くと考えてみる方がよいと思います。 なので、通常フローの配置には影響を与えていません。(tableはまた別に考えるとして) ただ、文字はfloatが指定されたボックスを避けるように回りこみます。 今回の例だと、p要素はwidthが指定されていないので、幅がボックスいっぱいまで拡張されています。なので、右側に文字が回りこんでいるように見えます。 class="right"のdiv要素はwidthが指定されていますが、これはclass="left"のdiv要素よりも幅が小さいです。なので要素の幅を超えているため文字が右側に回りこめず、下のほうに回りこんでしまったという結果になります。 大抵こういう場合は右側にくる要素にmargin-leftを指定したりします。
その他の回答 (1)
- naokita
- ベストアンサー率57% (1008/1745)
構造図などがないので何をどこに配置したいのかわかりませんが、 基本的に、floatの場合には全体の外枠幅とその中に割当てるwidth幅を考慮 それぞれもfloatさせたり、clear解除させたりしなければ不安定です。 今回は、全体幅が800px コンテントが300px 200px 100pxと計算があわないのと P をどこに配置したいのか・・・ class="right"にしているくらいだから、右に配置したいのだと思いますが 配置の設定がされていません・・・ これだと、右上なのか右下なのか余ったスペースなのか）全くわかりません。 -------------------------------------------------- <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 { float: 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> <div style="float:left; width:290px; border:1px solid silver;"> <table> <tr><td>TABLE</td></tr> </table> <p>ppppp</p><p>ppppp</p><p>ppppp</p><p>ppppp</p><p>ppppp</p> </div> <div class="right">いいいいいいい </div> <div style="clear: both; border:1px solid blue;">ううううう </div> <p>ppppp</p><p>ppppp</p><p>ppppp</p><p>ppppp</p><p>ppppp</p> </div> </body> </html>
お礼
ご回答ありがとうございます。参考にさせていただきます。
お礼
ご回答ありがとうございます。なんとなく分かってきました！ありがとうございます。