floatの使い方について質問があります。

質問

floatの使い方について質問があります。
http://homepage.wakabagari.com/sample15.html
上記のホームページは外部cssにてfloatを設定していますが
なぜ、HOME～SAMPLE4をwidth:830pxに設定すると、
以下のコンテンツがその幅に収まるようにfloatされるのでしょうか？

私の感覚では、あくまでHOME～SAMPLE4の幅が830pxになるだけで、
以下のコンテンツは特別に改行でもしない限り、その右側に続いていくと
思っていたのですが。

どうぞよろしくお願いいたします。

回答No.3

cotae_bb · ベストアンサー

こんばんはNo.1です。

<div>はもともと縦にならんでいきます。
<div>コンテンツ１</div>
<div>コンテンツ２</div>
<div>コンテンツ３</div>
とすると
【コンテンツ１】
【コンテンツ２】
【コンテンツ３】
という風に並びます。

それを
【 　コ　ン　テ　ン　ツ　１ 　】
【コンテンツ２】【コンテンツ３】
こういう風に並べるために
「float」が使われます。

今回のは
【コンテンツ１】
【コンテンツ２】
とあり、２の中に
<div>が三つほどfloatで横に並んでいます。

┌┐
││
└┘
┌──────┐
│┌┐┌┐┌┐│
││││││││
│└┘└┘└┘│
└──────┘
（極端なイメージ）

補足

たびたびのご回答恐れ入ります。
コンテンツ１の幅を830pxから800pxに変更したところ、
コンテンツ２の幅も狭くなり

┌―――――┐
│　　　　 　 　　│
└―――――┘
┌─────┐
│┌┐┌┐ 　│
│││││　 │
│└┘└┘　 │
│┌┐　　　 │
│││　　　 │
│└┘　 　　 │
└─────┘

上記のようになりました。
これは何か特別な設定がされているのでしょうか？

回答No.2

yyr446

「HOME～SAMPLE4をwidth:830pxに設定すると、以下のコンテンツがその幅に
収まるようにfloatされる」
＝＞そんなこと、ないと思うんですけど。実際に試されたんですか、そもそも
820pxにおさまってたのを830pxに変えても、その幅にその幅に収まるのは当然
のような。質問の意図が違うのかなあ。。

ご提示のページだと

<div>
幅820PXを固定指定
HOME～SAMPLE4のリンクを配置
</div>
<div>
親DIV幅820PXを固定指定
<div>子供幅160px固定でfloat left</div>
<div>子供幅420px固定でfloat left</div>
<div>子供幅160px固定+左マージン40px固定でfloat left</div>
</div>
<div>ここでフローと解除</div>

で、％指定は無いし、javascriptで変えてるようにも見えないです。

補足

【　　コ　ン　テ　ン　ツ　(1)　　】【コンテンツ(2)】【コンテンツ(3)】

上記をfloatで

【　　コ　ン　テ　ン　ツ　(1)　　】
【コンテンツ(2)】【コンテンツ(3)】

上記のようなレイアウトにしたとすると
私が申し上げたHOME～SAMPLE4というのはコンテンツ(1)にあたります。
この幅が830pxに設定されていて、以下のコンテンツ(2)と(3)がこの幅の中に収まる
ようになっているというのを言いたかったのです。

回答No.1

cotae_bb

こんにちは

HOME～SAMPLE4 までは<div class="a2">の中にいますよね？
これらはstyleがwidth:820px;に設定されているので、
横一列にならんでいます。

もしかしてHOMEの下のSAMPLE1～4をみてますか？
これらは<div class="b">の中の<div class="b1">の中にいるので、
HOMEとは別の枠の中にいます。

お礼

【　コ　ン　テ　ン　ツ　(1)　】【コンテンツ(2)】【コンテンツ(3)】

上記をfloatで

【　コ　ン　テ　ン　ツ　(1)　】
【コンテンツ(2)】【コンテンツ(3)】

上記のようなレイアウトにしたとすると
私が申し上げたHOME～SAMPLE4というのはコンテンツ(1)にあたります。
この幅が830pxに設定されていて、以下のコンテンツ(2)と(3)がこの幅の中に収まる
ようになっているというのを言いたかったのです。