div+cssフローティングの解決策-CSSチュートリアル-php.cn

div+cssフローティングの解決策

高洛峰

リリース： 2017-03-31 11:15:30

オリジナル

1749 人が閲覧しました

如何清楚浮动（一）

　　已知一个大的div容器，这个容器包含了两个子div容器，然后在这两个子div容器的后面再添加一个div(这个div表示清除浮动的div容器)，清楚浮动的div容器设置css样式为clear:both，此时，大的div标签的内部(左右两边/*css5*/)浮动就清除了。

　　如果有一个大的div容器

，这个大的div包含了一个子div容器

、サブ div コンテナは幅、高さ、背景色を設定しますが、内部、マージン、およびフローティングは設定しません。このとき、サブ div コンテナはデフォルトで左に設定されます。コンテナはフローティングのままです (float)継承ブラウザ属性にはレイアウト効果がありません。次に、サブ div コンテナの float を float:left に設定しました。 float:left を設定すると、サブ div コンテナがフローティングになり、サブ div コンテナが大きな div の上部から一定の距離にあることがわかりました。容器。

<body>
        <div class="divcss5">
            <div class="clear"></div>
　　　　　　　　<!--<div class="clear eft"></div>
            　　　　　　　　<div class="clear ight"></div>-->
        </div> 
    </body>

ログイン後にコピー

The float has the marginattribute

その後、私はmargin-top:10px、サブディビジョンコンテナは元のベースで10px下に移動しました、つまり、floatはmargin-topに影響を与えません。一部のオフセットは、margin-left、margin-right、および margin-bottom 属性のオフセットに影響しません。

Floatingにはtop、left、right、bottom属性がありません

次に、margin-top:10px;を削除し、サブディビジョンコンテナにtop:10pxを設定すると、垂直座標がシフトしていないことがわかります。つまり、フローティングです。トップ属性はありません。同様に、left、right、bottom 属性はありません。

それでは、どのような状況下で、上、左、右、下のプロパティの設定がフローティングに影響するのでしょうか?

floatにはtop、left、right、bottomの属性(相対位置positionの条件設定)があります

そこで、サブdivコンテナに対して相対位置position:relativeを追加し、top:10pxと設定しました。そして突然、サブディビジョンコンテナが下を向いていることに気付き、下が10pxオフセットされました。

子divフローティングの状態を継続し、position:relative;に設定し、次にmargin-left:10px;に設定すると、子divコンテナの位置が水平方向に10pxオフセットされていることがわかります。同時に、マージン上、マージン右、マージン下がすべて変更されます。

つまり、子divコンテナにfloat:leftを設定してからmargin-leftを設定すると機能しますが、topを設定しても効果がありません。相対位置が子 div コンテナに設定されている場合、top はフローティング状態でのみ機能します。つまり、left と top は相対位置にある場合にのみ機能するということでしょうか。そこで、子 div コンテナーの float:left;position:relative; を削除し、対応する CSS コードを次のように記述します。 follow.clear{width: 200px;background: #f2e;color:#030617;height: 20px;top:50px;left:10px;};、結果は子 div コンテナが存在しないことになります位置は横軸と縦軸で移動しているため、相対位置が設定されている場合は左と上のみが機能することがわかります。マージンはポジションを設定するかどうかに関係なく機能します。

上記の float フローティングを続けます。float に継承を設定すると、この時点では子 div はフローティングにならず、デフォルトで左側にあることがわかります。同様に、子 div の先頭にフローティングスタイル none を設定しても、フローティング効果はありません。サブディビジョンコンテナに左右のフロートが設定されている場合のみ、サブディビジョンコンテナはフローティングとして表示されます。フロートをクリアする方法 (2)

次に、フロートをクリアする別の方法を使用します。HTML コードは依然として上記のコードで、大きなコンテナ内の div の CSS コード: .divcss5{

padding

:10px 0 ;幅: 100%; 左: 50%;右: 50%;背景: #007CB5;}、子 div コンテナの CSS コード: .clear{width: 200px;background: #f2e;color:#030617;height: 20px;float: left;}、この時点で表示されるのはフローティング効果で、サブ div コンテナが大きなコンテナの上に浮かんでいます。同じ原理で、css 擬似を使用できます。要素 :after、これは 1 つの非常に単純な CSS コードです。親コンテナーの css 疑似クラスを記述します。コード: .divcss5:after{content: "1";clear: Both;display: block;} , この時点で、大きなコンテナの float がクリアされ、大きな div コンテナの中にサブ div コンテナが含まれていることがブラウザ上で確認できます。ブラウザーで要素を表示すると、after が親コンテナーに含まれていることがわかります。したがって、この div レイヤーが 1 つ欠落していることを除けば、after は親コンテナー内にクリアなフローティング div を追加することと同等です。：後。

以上がdiv+cssフローティングの解決策の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。