div+css の解決策 float_html/css_WEB-ITnose-htmlチュートリアル-php.cn

親 div コンテナには 2 つの子 div が含まれています。親 div タグの内側 (左側と右側の /*css5) に、クリアなフローティング (クリア) div タグを追加します。 */) が浮くとクリアされます。

サブコンテナ を含む div コンテナ がある場合、そのサブコンテナ幅、高さ、背景色を設定します。内側と外側のマージンを設定せず、フローティング クリアとフローティング フロートをクリアしない場合、サブコンテナ div はデフォルトで左側に表示されます。それで、それが本当に左であるかどうか、float:left; を設定しましょう。 left を設定すると、サブコンテナの div がフローティングになり、サブコンテナの div が大きなコンテナの上部から一定の距離にあることがわかりました。次に、マージンを追加しました。 top:10px であり、マージン距離を下に移動すると、サブコンテナは元の位置にあります。つまり、サブコンテナは浮動しており、マージン パディングの影響を受けません。

ログイン後にコピー

ここでサブコンテナに top:10px を設定しても、表示される効果は変わりません。浮きは上と左で変わりません。相対位置 location:relative; をサブコンテナに設定するとどのような影響がありますか?サブコンテナの効果はまだ浮動していますが、 margin-left:10px と left:10px をそれぞれ設定すると、サブコンテナが margin-left と left に応じて対応する位置を変更することがわかります。同じマージントップとトップが変更されます。

つまり、サブコンテナをfloatに設定した場合、サブコンテナにmarginを設定すると効果があり、leftとtopを設定しても効果がないのは、サブコンテナに相対位置を設定した場合のみです。 -container、マージンだけでなく、左と上も機能する可能性があります。つまり、左と上は相対的な位置にある場合にのみ機能するという意味ですか?そこで、サブコンテナ内の float:left;position:relative; を削除し、それに対応して、top:10px;left:10px; と書き込みます。コードは次のとおりです: .clear{width: 200px;background: #f2e;color:#030617;height: 20px;top:50px;left:10px;}; 結果として、サブコンテナはまったく移動しません。つまり、 left 、 top は相対位置が設定されている場合にのみ機能することがわかります。マージンはポジションを設定するかどうかに関係なく機能します。

上記の float フローティングを続けて、float に継承を設定すると、この設定はブラウザのフローティング属性を継承しますが、この時点ではフローティングではなく、デフォルトで左側にあることがわかります。同じ初期値なしの設定は効果がありません。サブコンテナにフローティング左右セットがある場合のみ、サブコンテナはフローティングになります。

次に、別のメソッドを使用して float をクリアします。HTML コードは引き続き上記のコードであり、大きなコンテナの div の CSS コードは引き続き上記のコードです。divcss5{padding:10px 0;width: 100%; left: 50% ;right: 50%;background: #007CB5;}, サブコンテナのコードは上記のコードのままです: .clear{width: 200px;background: #f2e;color:#030617;height: 20px;float:left;}、この時点で表示されるのは、サブコンテナが大きなコンテナの上に浮いていることです。同じ原理で、CSS の両方を使用できます。以下は非常に単純な CSS コードです。親コンテナーは、コード: .divcss5:after{content: "1";clear: Both;display: block;} を記述します。大きなコンテナのフロートがクリアされており、ブラウザでは上記のように、サブコンテナが大きなコンテナの中に含まれていることがわかります。 F12 でブラウザを確認すると、親コンテナに after が含まれていることがわかります。したがって、親コンテナにクリアを追加するのと同じですが、このレイヤは .divcss5:after によって実装されています。