0

私はCSSでfloatがどのように機能するかを本当に学ぼうとしていますが、多くの問題を抱えています。実験すればするほど、混乱します。この例を確認してください。

<div class = "block1">hola</div>
<div class = "block2">hola</div>

.block1 {
    width:100px;
    border:1px solid;
    float: left;
    height:400px;
}

.block2 {
    width:300px;
    border:1px solid;
    background-color:red;
}

jsFiddle

2番目のブロックのコンテンツが最初のブロックの横に並んでいるのに、コンテナー自体が最初のブロックの真下にあり、右に拡張しているのはなぜですか？

これは、2番目のブロックの幅が大きい場合にのみ発生します。そうでない場合は、2番目のブロックがちょうど下になります。なぜそれが起こるのですか？2番目のブロックがすべて最初のブロックと並んでいるのに、下にあるのはなぜですか？

4

2 に答える 2

1

まず、floatドキュメントの「通常の流れ」から要素が取り出される場合。第二に、浮動要素に常に幅を設定するのが良いと考えられています。説明が本当に苦手です。

これを読む

この

于 2012-11-03T18:57:01.823 に答える
1

これらはあなたを助けるかもしれません...

W3C - ビジュアル フォーマット モデル - float の配置: 'float' プロパティ

W3C - 汎用コンテナー - div 要素と span 要素

于 2012-11-03T19:00:34.727 に答える