floatによる思考

最近仕事の中でよくfloatの使用の問題に出会うことができて、CSSは一連の属性が重なる結果なため、floatはよくBFC、外の距離の折り畳みなどと一緒に現れて、だからもともと簡単な問題はいつも人をぼんやりさせて、本文はfloatの使用を記録して後で調べることに備える.まず、最も基本的なコードを見てみましょう.

上述代码是一个div内有两个子div,由于div是块级元素,所以children1和children2会上下排列:

首先我们给children2加上一个左浮动样式,即把CSS样式更改如下:

 #parent {
            padding: 10px;
            border: 3px solid black;
            background-color: green;
        }
        
        #children1 {
            width: 80px;
            height: 80px;
            background-color: red;
            margin-top: 10px;
        }
        
        #children2 {
            width: 80px;
            height: 80px;
            background-color: blue;
            float: left;
        }

次の結果が表示されます.
上図では、children 2(青色のブロック)がフローティングスタイルを追加するため、フローティングスタイルは通常のページストリームではなく、独立して位置決め.したがってparentブロックはchildren 1(赤いブロック)のみを含む、children 2は親要素を超えている.
上はchildren 2に左フローティングを加えたのですが、もし私たちがchildren 1に左フローティングを加えたとしたら?

 #parent {
            padding: 10px;
            border: 3px solid black;
            background-color: green;
        }
        
        #children1 {
            width: 80px;
            height: 80px;
            background-color: red;
            margin-top: 10px;
            float: left;
        }
        
        #children2 {
            width: 80px;
            height: 80px;
            background-color: blue;
        }

次の結果が表示されます.
上の図では、children 1(赤色のブロック)がフローティングスタイルを設定、フローティング要素z-indexのレベルが通常の要素より高いため、children 2(青色のブロック)に表示する.
通常、フローティング要素は親要素の高度な陥没を引き起こします.たとえば、CSSファイルを次のように変更すると、

 #parent {
            padding: 10px;
            border: 3px solid black;
            background-color: green;
        }
        
        #children1 {
            width: 80px;
            height: 80px;
            background-color: red;
            margin-top: 10px;
            float: left;
        }
        
        #children2 {
            width: 80px;
            height: 80px;
            background-color: blue;
            float: right;
        }

次の結果が表示されます.
フローティングを明確にするために、parentブロックにサブブロックを追加し、次のスタイルを追加できます. #children3 { width: 80px; height: 80px; background-color: orange; clear: both; }

次の結果が表示されます.
これにより、親コンテナは現在、非フローティングサブエレメントの位置を考慮しなければならないが、後者はフローティングエレメントの下に必ず現れるため、親コンテナはすべてのサブエレメントを含んでいることが明らかになった.ネット上で言うclearfixは浮動原理がこれと同じであることに注意しなければならない.もちろん、フローティングには、フローティング要素の親要素をトリガブロックレベルのフォーマットコンテキスト、すなわちBFCを形成する別の方法があることは明らかである.