ホームページ > 記事 > ウェブフロントエンド > BFC_html/css_WEB-ITnose の簡単な分析
BFC_html/css_WEB-ITnose の簡単な分析
- WBOYオリジナル
- 2016-06-24 11:25:241063ブラウズ
BFCとは何ですか?
うんちボーイ？
もちろん違います。 BFC、英語名は Block formatting context で、直訳すると「ブロックレベルの書式設定コンテキスト」となります。これは、要素がコンテンツをどのように配置し、他の要素と関係付け、相互作用するかを決定する W3C CSS 2.1 仕様の概念です。次の表に、BFC 要素になる特徴と BFC になる方法を示します。
BFC (W3C参照) | |
特徴 |
ボックスモデルを配置する際、要素がBFCとなる条件を満たしていれば、その要素は孤立した独立したコンテナになります、BFCの領域は外部浮動要素と重なりません。また、同じBFC内の2つの隣接するブロックレベル要素のマージンは重なりませんが、異なるBFCのマージンは重なりません。 BFCの高さを計算する際には、BFC 内の浮遊要素も含まれます。总之，BFC と外部元素相互影響なし |
| 触発 BFC の方法
1、根元素 2、float 属性なし 3、位置は絶対または固定です 4. オーバーフローの値は表示されません。 | 5. 表示の値は、table-cell、table-caption、inline-block のいずれかです。
長い間話した後、「ねえ、Ge Ge、要素を BFC にすることに何の意味があるの?」と尋ねるかもしれません。 以上です。その特徴、特に私が強調した部分から始めて、
BFC 要素が浮動要素との重複を防ぐことができることがわかります。
ん？どのような意味です。以下のデモを見てください
<!DOCTYPE html> <head> <title>BFC</title> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> <style> .leftDiv { width:100px; height:100px; background:green; float:left; } .normalDiv { height:100px; background:pink; } </style> </head> <body> <div class="leftDiv"></div> <div class="normalDiv"></div> </body></html>
コードを実行し、Chrome デバッガーを開き、normalDiv 要素をクリックすると、normalDiv の一部が floatDiv によってブロックされている、つまり重なっていることがわかります。
次に、normalDiv を BFC になるようにトリガーします。たとえば、その属性のオーバーフローを非表示に設定し、コードを実行して結果を確認します。実行結果から、normalDiv を BFC になるようにトリガーすると、floatDiv と重複しないことがわかります。
わかりました、BFC が浮動要素との重複を実際に防ぐことができることも知っています。それでは何の役に立つでしょうか?
アダプティブレイアウト! ！ ！ (詳細は次の記事で)
その特性から始めて、
BFC が外側のマージンの重なりを防ぐことができることもわかります。
たとえば、
<!DOCTYPE html> <head> <title>BFC</title> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> <style> .leftDiv { width:100px; height:100px; background:green; float:left; } .normalDiv { height:100px; background:pink; /*添加overflow:hidden*/ overflow:hidden; } </style> </head> <body> <div class="leftDiv"></div> <div class="normalDiv"></div> </body></html>
など、ブロックレベルの要素の垂直マージンが重なることは誰もが知っています。上記の実行結果 (赤い領域) から、それらの垂直マージンが重なっていることがわかります。
その理由は、同じBFC(ルート要素)に属しており、余白が重なってしまうからです。したがって、そのうちの 1 つが別の BFC に属している限り、問題はありません。
以下のコードとデモを参照してください:
<!DOCTYPE html> <head> <title>test_slice</title> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> <style> .div1,.div2 { width:100px; height:100px; margin:20px; } .div1 { background:green; } .div2 { background:pink; } </style> </head> <body> <div class="div1"></div> <div class="div2"></div> </body></html>
コードを実行して、実際にそのとおりであることを確認してください。
その特性から始めて、
BFC が明確に浮くことができることもわかります。 「崩壊」問題を解決する方法として、親要素に overflow:hidden を追加すると、親要素がフローティング要素をラップして明確にフローティングできることは知っていましたが、その方法はわかりません。理由は、後で親要素をラップするため、親要素の高さを計算するときに浮動要素が計算に含まれることがわかり、BFC は外部要素に影響を与えないため、浮動要素はクリアされます。
これは将父元素BFCなしの実行結果图
<!DOCTYPE html> <head> <title>BFC</title> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> <style> .div1,.div2 { width:100px; height:100px; margin:20px; } .anotherBFC { display:table-cell; } .div1 { background:green; } .div2 { background:pink; } </style> </head> <body> <div class="anotherBFC"> <div class="div1"></div> </div> <div class="div2"></div> </body></html>
これは将父元素BFC後の実行結果
<!DOCTYPE html> <head> <title>BFC</title> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> <style> *{ margin:0; padding:0; } ul { border:1px solid pink; } li { width:100px; height:100px; margin-left:10px; background:green; float:left; list-style-type:none; } </style> </head> <body> <ul> <li></li> <li></li> </ul> </body></html>
哈、のようなものです。
エレメンタル BFC のトリガーに優れていることには多くの利点があるようです。