cssフローティングをクリアする原因と方法

cssはフローティングを設定すると、ドキュメントフローから離脱します.いわゆるドキュメントフローから離脱するのは、通常のレイアウトレイアウトレイアウト(上下左右)から要素を持ち去り、他の箱が位置決めされると、ドキュメントフローから離脱する要素が存在しないとして位置決めされます.より正確には、1つの要素がドキュメントフロー(out of normal flow)から離れた後、他の要素は位置決め時にそれを見ていないと見なし、両方の位置が重なることができます.
 
擬似要素を使用してフローティングをクリアするには、次の手順に従います.

.clear-fix:after{
    content: '';
    /* String， clear-fix    ，      */
    display: block; //    ，      
    clear: both;
    overflow: hidden;
}