ホームページ > 記事 > ウェブフロントエンド > div+css の解決策 float_html/css_WEB-ITnose
div+css の解決策 float_html/css_WEB-ITnose
- WBOYオリジナル
- 2016-06-24 11:44:271093ブラウズ
親 div コンテナには 2 つの子 div が含まれています。親 div タグの内側 (左側と右側の /*css5) に、クリアなフローティング (クリア) div タグを追加します。 */) が浮くとクリアされます。
サブコンテナ 266b42fc2b469bb88063b7b7f9d1b47116b28748ea4df4d9c2150843fecfba68 を含む div コンテナ 0fd95622ee3d539259ddb2dd2ba82a65 16b28748ea4df4d9c2150843fecfba68 がある場合、そのサブコンテナ幅、高さ、背景色を設定します。内側と外側のマージンを設定せず、フローティング クリアとフローティング フロートをクリアしない場合、サブコンテナ div はデフォルトで左側に表示されます。それで、それが本当に左であるかどうか、float:left; を設定しましょう。 left を設定すると、サブコンテナの div がフローティングになり、サブコンテナの div が大きなコンテナの上部から一定の距離にあることがわかりました。次に、マージンを追加しました。 top:10px であり、マージン距離を下に移動すると、サブコンテナは元の位置にあります。つまり、サブコンテナは浮動しており、マージン パディングの影響を受けません。
<body> <div class="divcss5"> <div class="clear"></div>
8387170a1dc1061890d03fa7e3e8458b16b28748ea4df4d9c2150843fecfba68
ここでサブコンテナに top:10px を設定しても、表示される効果は変わりません。浮きは上と左で変わりません。相対位置 location:relative; をサブコンテナに設定するとどのような影響がありますか?サブコンテナの効果はまだ浮動していますが、 margin-left:10px と left:10px をそれぞれ設定すると、サブコンテナが margin-left と left に応じて対応する位置を変更することがわかります。同じマージントップとトップが変更されます。
上記の 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 によって実装されています。