FCとBFC

1. FCとは何ですか

clipboard.png

2.BFCコンテキストブロックレベルフォーマット(ブロックフォーマット文脈)

 ボックスは、オブジェクトとCSSレイアウト、ビューの直線点の基本単位であるページがボックスの数で構成されていることです。要素の種類と表示プロパティは、ボックスの種類を決定します。ボックス内の要素は、異なる方法でレンダリングされるように、ボックスの異なるタイプは、(コンテナドキュメントをレンダリングする方法を決定する)は、異なるフォーマットのコンテキストに関与します。:のは、どのような箱を見てみましょう
ブロックレベルボックス :ランブロックに表示プロパティ、リスト項目、要素の表は、ブロックレベルボックスを生成します。コンテキストをFomattingとブロック参加;
インラインレベルボックス :表示属性は、インラインブロック、inline-、インラインであるテーブル要素の、インラインレベルボックスを生成します。コンテキストをフォーマットすると、インラインに参加し、
RUN-で箱 :だけCSS3で。

(1)定義:それだけ、独立した描画領域であるブロックレベルボックスは ..ボックス内の所定のレイアウトブロック・レベルのサブエレメントに参加
BFC共通のトリガ条件(2):

1>.根元素,即HTML元素
2>.float不为none
3>.position不为static或者是relative
4>.overflow的值为hidden,auto或者scroll
5>.display的值为table-cell,table-caption或者inline-block

BFCレイアウトルール(3):
1>垂直方向のボックス内.BFCが次々に配置される
2> BFC同じマージン隣接ボックスマージが発生します。

3>各ボックス要素(マージンボックス)との接触を含む、その境界ボックス容器の外側の左端(対向レイアウトの右から左へと、右側に接触している)ため、フローティングあっても
抽象1> 2> 3>:ボックス機構、カセットは、マージンがマージ閉じたときに、ボックスの外側場合、ネストされた内側要素と外側容器の近傍からボックス境界ボックスの
例:
clipboard.png
clipboard.png
clipboard.png

説明:IMG画像マージンボックスクラスと境界ボックス第一コンタクトブロック要素の内側。

4> .BFC領域は、オーバーラップ、及びフロートボックスない
5> .BFCページがサブ要素が得要素の外側に影響を及ぼさない、請求別の容器であり、素子の内部に外を与えるように影響されない
> 6。計算BFCの高さは、浮動要素も計算に関与しています

簡単録画順:独立(5>)レンダリング(3> 1> 2> 4>)領域(計算領域6>)

(4)重畳の計算
1>二つは両方の最大値をとる、正のマージンであり;
2>マージンが大きい絶対値がとられており、負であり、かつ0位置、負変位から
正または負、負のマージンは、正のマージンとマージンを加えた最大値を最大絶対値を除去し、そしてする3>。

(5).BFC使用
1>フローティング要素が要素で覆われている防ぐことができる
。2>適応2列のレイアウト
3>フローティング要素を含んでいてもよい-内部フロートクリアする
4>異なるBFCオーバーラップマージンを防止することができます。

(6)図心

clipboard.png

おすすめ

転載: www.cnblogs.com/baimeishaoxia/p/11864155.html