float解除で親要素も解除！HTMLでの回り込みを制御する方法とは？

2011/01/22 23:21

このQ&Aのポイント

ホームページ作成中に問題が発生しました。floatを解除すると親要素も解除されるため、回り込みを制御できません。どのようにすれば解決できるでしょうか？
HTMLのfloatを解除すると親要素も解除される問題について解説します。回り込みを制御する方法と、解決策についてご紹介します。
floatの解除で親要素も解除される問題に悩んでいます。HTMLにおける回り込みの制御方法や、解決策について教えてください。

infumi1126
お礼率50% (21/42)

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

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

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

ベストアンサー

ORUKA1951
ベストアンサー率45% (5062/11036)

2011/01/23 13:14 回答No.4

ざっとイメージを拝見した限りでは、本来は、<p>aabbcc</p><p>aabbcc</p><p>ddeeff</p><p> ddeeff</p>の部分が本文のように見受けられます。【引用】＿＿＿＿＿＿＿＿＿＿＿＿ここからメモ: CSSスタイルシートを意図した通りに機能させるには、正しい文書解析木が必要です。つまり、正当なHTMLを用いるべきです。￣￣￣￣￣￣￣￣￣￣￣￣￣ここまで［W3C CSS 検証サービス( http://jigsaw.w3.org/css-validator/#validate_by_input )］より　そもそも、floatは、文章内で画像などの周囲に本文を回り込ませるための物ですから、回り込むのは本文であり、回り込まれるのは画像などです。多くのサイトでfloatをブロック要素の配置のために使用しているものを見かけますが、HTML的にもCSS的にも？？です。　たとえばHTMLが下記のようなものだと簡単に実現できますよね。【インデントを全角スペースで示していますので、これを半角スペースなりタブに変換すること】 <body> 　<div class="headLine" style="height:100px;border:1px solid green"> 　　<h1 style="text-align:center">見出し部分</h1> 　</div> 　<div class="bodyText" style="position:relative;margin-left:200px; width:auto;border:solid black 1px;"> 　　<div class="figure" style="float:left;width:200px; border:solid red 1px;height:150px;"> 　　　<img> 　　</div> 　　<p>aabbcc</p> 　　<p>aabbcc</p> 　　<p style="clear:left">ddeeffgg</p> 　　<p>ddeeffgg</p> 　　<div class="navigation" style="position:absolute;top:0px; width:180px;left:-200px;border:solid blue 1px;height:400px;"> 　　　　<p>目次</p> 　　</div> 　</div>　　 </body> 　HTML自体が、文書構造(これは著者にしか分からない)に従ってちゃんとマークアップされているかを確認してください。それさえ出来れば後はとっても簡単です。

質問者

お礼 2011/01/23 18:12

ありがとうございます。みなさんの回答をもとに色いろと試していたら、解決できました。

ログインすると、全ての回答が全文表示されます。

その他の回答 (4)

metametamu
ベストアンサー率51% (153/295)

2011/01/23 14:36 回答No.5

HTMLやCSSがわかれば具体的に回答できると思うんですが・・・補足は可能ですか？

質問者

お礼 2011/01/23 18:12

ありがとうございます。他の方の方法を色いろと試していたら、解決できました。

ログインすると、全ての回答が全文表示されます。

k0021
ベストアンサー率26% (32/120)

2011/01/23 06:51 回答No.3

aabbccにfloatの解除でなくddeeffでfloatの解除指定すればよいですよ。罫線つきで表示は、プラウザにより表示が異なります。 2列目大きさ 2列目の1列目大きさ？？？？？ 2列目の1列目大きさを閉じる 2列目の2列目大きさ aabbcc 2列目の2列目大きさを閉じる 2列目大さを閉じる 2列目大きさ ddeeff 2列目大きさを閉じる 2列目のまわしこみの解除私の使用例ですが　余分のことを　しているかも 3列で2列目に2列と3列を追加していますが

ログインすると、全ての回答が全文表示されます。

kuzumiHK
ベストアンサー率72% (132/183)

2011/01/23 02:59 回答No.2

親要素の右側のブロックをきっちりの幅にして、次のaabbccが回り込めないようにするか、右側のブロックとaabbccを同じブロックにまとめないかぎり難しいと思います。幅固定レイアウトであれば、前者の方法で幅をpxで指定するだけで解決できそうです。可変の場合は%での指定が混在するため苦労しそうです。もし、右側ブロックとaabbccが親ブロックよりもコンテンツとしてのつながりが深いのであれば、囲ってしまうのもありだと思います。

質問者