CSSフローティングの詳細な紹介-CSSチュートリアル-php.cn

ホームページ

ウェブフロントエンド

CSSチュートリアル

CSSフローティングの詳細な紹介

高洛峰

Mar 20, 2017 pm 04:11 PM

1. 標準フローはブラウザのデフォルトのレイアウトであり、上から下、左から右へのデフォルトのスケジュールレイアウトです。

CSSフローティングの詳細な紹介

2. レイアウト方法

2.1 floatingの本質: 画像とテキストを並べてフォーマットする問題を解決します。

*要素がフローティングされると、標準のフローから外れ、レイアウトに影響を与えます。

2.1.1 float を設定しない前（before）：

CSSフローティングの詳細な紹介

2.1.2. float を設定した後（after）

CSSフローティングの詳細な紹介

* {
                padding: 0;
                margin: 0;
            }

            .box1 {
                width: 50px;
                height: 40px;
                background-color: #AFEEEE;
                border: 2px solid #3C3C3C;
                float: left;
            }
            
            .box2 {
                width: 300px;
                height: 300px;
                background-color: #ADFF2F;
                border: 2px solid #3C3C3C;
                
            }

ログイン後にコピー

※ float 要素は標準のスペースを占有しません。流れ。ただし、標準ストリーム内のテキストの書式設定には影響します。

3. フローティングの特徴

3.1. フローティングは標準フローから分離されており、標準フローに影響を与える位置を占めません。フローティングは左右に浮くだけです。

3.2. 浮動要素Aの配置位置は前の要素(ブロックレベル)と関係します。前の要素にフロートがある場合、A 要素の上部は前の要素の上部と位置合わせされます。前の要素が標準フローの場合、A 要素の上部は前の要素の下部と位置合わせされます。。

3.3. 親ボックス内の子ボックスの 1 つがフローティングされている場合、1 行に表示するには他の子ボックスもフローティングする必要があります。

3.4. Floatは要素の書き込み位置に応じて対応するfloatを表示します。

3.5. 要素をフローティングにした後、幅と高さが設定されていない場合、要素はインラインブロック要素の特性を持ちます。要素のサイズは、定義されたサイズまたはデフォルトのコンテンツに完全に依存します。つまり、要素にはラッピングプロパティがあります。

3.6. フローティングは破壊的です。要素がフローティングされると、元の通常のフローレイアウトが破壊され、コンテンツが崩れます。

注: 標準フローの親ボックスが高く設定されておらず、すべての子ボックスがフローティングされている場合、親ボックスの高さは 0 に崩壊します

4. フローティングの破壊性によって引き起こされる高さの崩壊の問題を解決します。 .

overflow

メソッド:親ボックスにoverflow: hiddenを設定する(折り返しにする)

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>溢出处理案例</title>
        <style>
            .box1 {
                /*滚动条随着需要而产生*/
                height: 60px;
                width: 60px;
                overflow: auto;
                float: left;
                background-color: #5F9EA0;
            }
            
            .box2 {
                height: 60px;
                width: 60px;
                overflow: hidden;
                float: left;
                background-color: #ADFF2F;
            }
            
            .box3 {
                height: 60px;
                width: 60px;
                overflow: visible;
                float: left;
                background-color: #CCCCCC;
            }
            .box4 {
                /*始终有滚动条*/
                height: 160px;
                width: 160px;
                overflow: scroll;
                float: right;
                background-color: #FFC0CB;
                
            }
        </style>
    </head>
    <body>
        <div class="box1">overflow:auto;**minking 的博客minking 的博客minking 的博客</div>
        <hr />
        <div class="box2">overflow: hidden;**minking 的博客minking 的博客minking 的博客</div>
        <hr />
        <div class="box3">overflow: visible;**minking 的博客minking 的博客minking 的博客</div>
        <hr />
        <div class="box4">overflow: scroll;**minking 的博客minking 的博客minking 的博客</div>
    </body>
</html>

ログイン後にコピー