BFC的布局規則以及觸發條件

                   1   .BFC的含義 ：         

  

                               Block Formatting Contexts（BFC）                                      塊級元素格式化上下文

                                它決定了塊級元素如何對它的內容進行布局，以及與其他元素的關系和相互關系

                                塊級元素：父級（是一個塊元素）

                                內容：子元素（是一個塊元素）

                                其他元素：與內容同級別的兄弟元素

                                相互作用：BFC里的元素與外面的元素不會發生影響              

 

                 2.觸發條件    ：      

      

                            

                                  觸發BFC的方式（一下任意一條就可以）

                                        1.float的值不為none

                                        2.overflow的值不為visible

                                        3.display的值為table-cell、tabble-caption和inline-block之一

                                        4.position的值不為static或則releative中的任何一個

 

                3.FBC布局與普通文檔流布局區別      

                              

                     普通文檔流布局規則

                      1.浮動的元素是不會被父級計算高度

                      2.非浮動元素會覆蓋浮動元素的位置

                      3.margin會傳遞給父級

                      4.兩個相鄰元素上下margin會重疊

    

                            BFC布局規則

                            1.浮動的元素會被父級計算高度（父級觸發了BFC）

                            2.非浮動元素不會覆蓋浮動元素位置（非浮動元素觸發了BFC）

                            3.margin不會傳遞給父級（父級觸發了BFC）

                            4.兩個相鄰元素上下margin會重疊（給其中一個元素增加一個父級，然后讓他的父級觸發BFC）

1. <divstyle="border:1px solid #f00;overflow:hidden; ">
2. <divstyle="width:100px; height:100px; background:green;float:left;">kaivon</div>
3. </div>
5. <divstyle="border:1px solid #f00;margin-top:100px; ">
6. <divstyle="width:100px; height:100px; background:green;float:left;">kaivon1</div>
7. <divstyle="width:100px; height:100px; background:red;overflow:hidden;">kaivon2</div>
8. </div>
10. <divstyle="background:blue;margin-top:100px;overflow:hidden;">
11. <divstyle="width:100px; height:100px; background:green; margin-top:100px;">kaivon1</div>
12. <divstyle="width:100px; height:100px; background:red;">kaivon2</div>
13. </div>
15. <divstyle="margin-top:100px; border:1px solid red;">
16. <divstyle="width:100px; height:100px; background:green; margin:100px0;">kaivon1</div>
17. <divstyle="overflow:hidden;">
18. <divstyle="width:100px; height:100px; background:red; margin:100px0;">kaivon2</div>
19. </div>
20. </div>

                  overflow              針對超出父級的內容如何顯示

 

                  visible               默認值，超出的內容會顯示出來

                  auto                  如果內容超出了父級，那就出現滾動條, 如果內容沒有超出，那就不出現滾動條

                  hidden                超出的內容給隱藏掉              

                  scroll                不管內容是否超出都出現滾動條  

kaivon

kaivon1

kaivon2

kaivon1

kaivon2

kaivon1

kaivon2