BFCについて例を通して説明する

3425 ワード
bfc css

BFCの基本概念


ブロックフォーマットコンテキスト(Block Formatting Context,BFC)は、Webページの可視化CSSレンダリングの一部であり、ブロックボックスのレイアウトプロセスが発生する領域であり、フローティング要素が他の要素と相互作用する領域でもある.
MDNから

BFCの作成方法


次の方法で作成されます.
ブロックフォーマットコンテキスト:
  • 本の元素()
  • （ floatはnoneではない)
    • .
  • ( のpositionはabsoluteまたはfixed)
    • .
  • ブロック ( のdisplayはinline-block)
  • のセル( のdisplayはtable-cell、HTML のセルは )
    • .
  • ヘッダー( のdisplayはtable-caption、HTML ヘッダーはデフォルト )
    • .
  • セル ( のdisplayはtable、`table-row 、 table-row-group、table-header-group、 table-footer-group （ HTML table、row、tbody、thead、tfoot ） inline-table`)
    • .
  • overflowの がvisibleでないブロック
    • .
  • displayの がflow-rootの で、 のないBFC( 53+,chrome 58+,opera 45+サポート)
    • を できます.
  • containの がlayout、contentまたはpaintの
    • である.
  • (displayはflexまたはinline-flex の )
    • .
  • メッシュ (displayはgridまたはinline-grid の サブ )
    • .
  • の ( のcolumn-countまたはcolumn-widthはauto， `column-count 1`)
    • .
  • column-spanがallの である 、 が のカラムコンテナに まれていない でも、 に しいBFCが されます( 、Chrome bug).

    • BFCの シーン( で )

    • css 

      .box {
    border: 1px solid #f00;
    //   BFC,       
    overflow: hidden;
    /* overflow: auto; */
    /* position: absolute; */
    /* position: fixed; */
    /* display: table; */
    /* display: flex; */
}

.fl {
    float: left;
    width: 50px;
    height: 50px;
    background: #0f0;
    margin: 5px;
}
      html

    • BFC

      ：

      p ， 15px, 20px 
      p {
  margin: 15px auto 20px;
  background: #f00;
}
      html 
      
  
      1
      
  
      2
      
  
      3

      の
      )
      2つのpタグ の さは20 pxであり、20+15=45 pxではない.これがエッジオーバーラップであり、 の1つのエッジを し、20 pxである.
      は、pタグの を し、BFC css 
      p {
    margin: 15px auto 20px;
    background: #f00;
}
      html 
      1
      

      
    
      2
      

      

      3
      を することです.
      このとき, の の は ならず,このときの は45 pxである.
      してみてください
      ドキュメント:
    • MDN

    Sass学習
    ASP.NET MVCによるActionFilterによるAOP設計例