CSSのBFC

BFCの概念:
BFCは「ブロックレベルフォーマットコンテキスト」と直訳され、独立したレンダリング領域であり、Block-level-boxのみが参加し、独立したレンダリング領域内のBlock-level-boxがどのようにレイアウトされ、この独立した領域は外部領域と相互に影響しないことを規定している.
次の要素はBFCをトリガーします.
1、ルート要素
2、float属性がnoneでない要素
3、position属性absoluteまたはfixedの要素
4、display属性はinline-block、table-cell、table-caption、flex、inline-flexの要素
5、overflow属性がvisibleでない要素
BFCのレイアウト規則:
1、独立レンダリング領域内のBlock-level-boxは垂直方向に、次から次へと並べられます.
2、Block-level-boxの垂直方向の距離はmarginによって決定され、同じBFCに属する2つの隣接するBlock-level-boxのmarginが重なる.
3、各Block-level-boxの左外縁は独立したレンダリング領域の左外縁と重なる.
4、BFCによって生成された独立レンダリング領域はfloat boxと重複しない;
5、独立したレンダリング領域の高さを計算する場合、フローティング要素も計算に参加する.
BFCの役割:
1、フローティングのクリア
2、marginの重複防止
3、多欄レイアウト
1、フローティングのクリア ：

       
       

#container {
       border: 1px solid red;
       width: 500px;
}
#container .item {
       width: 200px;
       height: 200px;
       float: left;
       border: 1px solid blue;
}
PS： container ； container BFC， container BFC ， container 。
#container {
       width: 500px;
       overflow: hidden;
       border: 1px solid red;
}

2、marginの重複防止 ：



.item {
       width: 200px;
       height: 200px;
       margin: 20px;
       background: #000;
}
PS： 20px， margin 。 BFC Block-level-box margin 。 div ， BFC。 div BFC margin 。


       


#container {
       overflow: hidden;
       border: 1px solid red;
}
.item {
       width: 200px;
       height: 200px;
       margin: 20px;
       background: #000;
}

3、多欄レイアウト ：

       
       

#container {
       width: 600px;
       position: relative;
}
#container .left {
       width: 200px;
       height: 300px;
       float: left;
       background: red;
}
#container .right {
       height: 400px;
       background: bule;
}
PS： BFC ：BFC float box 。 div BFC， ， ， 。
#container .right {
       height: 400px;
       background: bule;
       overflow: hidden;
}
PS:CSS 2にはBFCとIFCの概念があり、CSS 3にはFFCとGFCが追加された.