BFCのアプリケーション

概念：BFCボックスをトリガし、ボックス内部と外部とは完全に分離されて、外部に容器内のサブエレメントは、レイアウト要素に影響を与えません

Aは、BFCの道を生成します。

ケースの値が表示されていない限り1.overflow

値は、時間のどれもないではありません2.float

3.display値は、インラインブロック又はテーブルであります

4.position値は、固定または絶対的

II。BFCのいくつかの一般的な役割

1. 2つのボックス、マージン-bottomプロパティは、マージントップ属性、2つのボックス融合マージン値がある場合

<スタイル> 
    .box1 { 
    幅：200pxの。
    高さ：200pxの。
    背景 - 色：赤; 
    マージン - 下：は50px;    
    } 
    .box2 { 
    幅：200pxの。
    高さ：200pxの。
    背景 - 色：ライム。
    マージン - トップ：は50px;    
    }
 </スタイル>

ワンボックスは親にBFCを追加するためのボックスを与えることができ、BFCは、相互の統合の問題の2つのボックスのマージンを解決するために価値を追加しました

<スタイル> 
    .box1 { 
    幅：200pxの。
    高さ：200pxの。
    背景 - 色：赤; 
    マージン - 下：は50px;    
    } 
    .box2 { 
    幅：200pxの。
    高さ：200pxの。
    背景 - 色：ライム。
    マージン - トップ：は50px;    
    } 
    .bfc { 
        オーバーフロー：隠されました。
    }
     </スタイル> 
    

の<div クラス = " BOX1 " > </ div> 

<divのクラス = " BFC " > 
<div要素クラス = " BOX2 " > </ div> 
</ div>

2. 2つのボックス、親ボックス、カセットボックスがありますが、値がサブマージントップボックスに設定され、ボックスは親が崩壊します

BFCを追加する親ボックスは、親ボックスの問題の崩壊を解決することができます

<スタイル> 
.father { 
    幅：200pxの。
    高さ：200pxの。
    背景 - 色：赤; 
    オーバーフロー：隠されました; 
} 
.son { 
    幅：100pxに。
    高さ：100pxに。
    マージン - トップ：30px; 
    背景 - 色：ライム。
}
 </スタイル> 
    

の<div クラス = " 父" > 
    <divのクラス = " 息子" > </ div> 
</ div>

浮動を除去するために使用することができ3.BFC

ボックスを浮動サブは、標準的な要素をドラッグすると、親は箱を軟化することはできません

BFCは、親ボックスに追加しました

    <スタイル> 
.father { 
    幅：300ピクセル; 
    国境：1pxの固体＃000 ; 
    オーバーフロー：隠されました; 
} 
.son { 
    幅：200pxの。
    高さ：200pxの。
    背景 - 色：ライム。
    フロート：左; 
}
 </スタイル> 
    

の<div クラス = " 父" > 
    <divのクラス = " 息子" > </ div> 
</ div>

BFCボックスは、フローティング要素と重ならない4.トリガは、左右の適応レイアウトの固定に使用されます

<スタイル> 
.LEFT { 
幅：200pxの。
高さ：200pxの。
背景 - 色：赤;
フロート：左; 
} 
.RIGHT { 
高さ：300ピクセル。
背景 - 色：ライム。
オーバーフロー：隠されました; 
}
 </スタイル> 
    

の<div クラス = " 左" > </ div> 
<divのクラス = " 右" > </ div>

おすすめ