国产xxxx99真实实拍_久久不雅视频_高清韩国a级特黄毛片_嗯老师别我我受不了了小说

資訊專欄INFORMATION COLUMN

前端必懂之熟悉又陌生的BFC

Dongjie_Liu / 1556人閱讀 

寫在最前：BFC看起來是個很陌生的概念但它卻時時發生在我們工作中，如何清除浮動影響？如何避免margin穿透問題？如何編寫兩欄自適應布局？都和BFC有這密不可分的關系，下面走進切圖妞的世界，分分鐘搞定BFC！
一、什么是BFC？

BFC概念

塊格式化上下文（Block Formatting Context，BFC） 是Web頁面的可視化CSS渲染的一部分，是塊盒子的布局過程發生的區域，也是浮動元素與其他元素交互的區域。簡而言之，BFC就是一種邊距重疊的解決方案。

BFC原理

BFC內部元素的元素在垂直方向上的邊距會發生重疊

BFC不會與浮動元素重疊

BFC是獨立的容器，不會影響里面的元素，里面的元素也不會影響外面元素

計算BFC元素高度時，浮動元素也會參與計算

二、BFC產生條件

主流：

根元素或包含根元素的元素

浮動元素：float不為none(float+float具有包裹性和破壞性導致無法自適應，一般用在塊狀浮動布局)

絕對定位元素：position不為static或者relative(absolute脫離文檔流)

overflow 值不為 visible 的塊元素(overflow可自適應，但由于溢出不可見限制了應用場景)

行內塊元素：display為inline-block(inline-block具有包裹性，無法自適應,IE8以下無法識別該屬性)

表格單元格：元素的 display為 table-cell（HTML表格單元格默認為該值，table-cell具有包裹性，無溢出特性，絕對寬度也能自適應）

非主流：

表格標題：元素的 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

display 值為 flow-root 的元素

contain 值為 layout、content或 strict 的元素

彈性元素：display為 flex 或 inline-flex元素的直接子元素

網格元素：display為 grid 或 inline-grid 元素的直接子元素

多列容器：元素的 column-count 或 column-width 不為 auto，包括 column-count 為 1

column-span 為 all 的元素始終會創建一個新的BFC，即使該元素沒有包裹在一個多列容器中

三、BFC使用場景 1、margin穿透問題1

寫樣式的時候常常懷疑我的margin是被瀏覽器吞掉了嗎？
作為一個子元素想離父元素上邊距有50px的距離，正常情況下是這么顯示的


  
height: 50px;margin-top: 50px;


.sec { background: #ebf6fd; }
.child { height: 50px;background: #09d;margin-top: 50px; line-height: 50px;}


子元素的margin-top值因為穿透問題沒有實現預想效果

解決方法：使父元素變為BFC，添加overflow:hidden的樣式，就會實現如下效果

  
height: 50px;margin-top: 50px;


2、margin穿透問題2

書寫列表結構的時候，margin-top為20px,margin-bottom為20px，預想中應該出現40px的效果，但是正常情況下是這樣的：


  
切圖妞切圖妞切圖妞切圖妞切圖妞切圖妞切圖妞

  
切圖妞切圖妞切圖妞切圖妞切圖妞切圖妞切圖妞


.margin {background: #ebf6fd;}
.margin p { margin: 20px auto;background: #09d; line-height: 40px;}

margin-top和margin-bottom在垂直方向的邊距會發生重疊現象，margin-top和margin-bottom哪個大就間隔哪個的距離。

解決方法：給子元素再創建一個父元素，使父元素是BFC

  

    
切圖妞切圖妞切圖妞切圖妞切圖妞切圖妞切圖妞

  

  

    
切圖妞切圖妞切圖妞切圖妞切圖妞切圖妞切圖妞

3、兩欄自適應布局

圖片與文字組合的結構，我們經常會使圖片浮動起來，利用float的包裹性，讓文字環繞圖片，如下：


  
  

    傻人有傻福
  


.layout {background: #ebf6fd;margin-top: 20px;}
.layout .left { float: left; width: 150px;height: 168px;}
.layout .right {background: #09d;text-align: left; }

但是當我們想把圖片和文字的區塊獨立分來一左一右的時候呢？

解決方法：使右側元素為BFC，添加overflow:hidden的樣式
img src="img/bqb1.jpg" class="left" alt="" />
  

    傻人有傻福

當我們需要圖片與文字間距20px時，有兩種方法：左側margin-right或者右側padding-left






  傻人有傻福
 



4、清除浮動

父元素包含浮動元素，導致父元素塌陷，正常情況如下：



  
切圖妞切圖妞切圖妞切圖妞切圖妞切圖妞切圖妞




.floatBorder { background: #ebf6fd;border: 1px solid #FFBE00;margin-top: 20px;}
.floatBorder .float { float: left; line-height: 50px; background: #08d;}



父元素塌陷除了border外失去高度，此時需要利用BFC內子元素即使是浮動元素也會參與計算的原理


解決方法：使父元素變成BFC，添加清除浮動類


.clearfix {*zoom: 1 }
.clearfix:after {content: "";display: table; clear: both }



四、結語

具有BFC屬性的元素是一個獨立的容器，它不受子元素影響也不影響子元素！當margin遇到BFC，邊距重疊問題得以解決；當BFC元素身邊存在浮動時，它拒絕了float的包裹性獨立成一個容器不與其重疊；當浮動元素在BFC元素里面時，計算高度時將內部浮動元素也進行計算，解決了父元素塌陷的問題！
上面示例代碼已上傳，可下載練習修改→BFC Demo


尊重原創，如需轉載請注明出處！


參考資料：
張鑫旭-CSS深入理解之overflow
MDB-塊格式化上下文
           
               
                                           
                       
                 
            
                     

                 

                                                                                                                    
                         云服務器
                                             
                         GPU云服務器
                                                                                                                                                 
                                      
                     
                    
                                                                                               熟悉linux的操作
                                                                                                           熟悉linux的使用
                                                                                                           熟悉linux的應用
                                                                                                           bfc
                                                         
                 

               
              

             
               

                   
 文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

                 
                   
轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/54786.html

               

                      
               
              
              

                
相關文章

                
              

              
               

                  
                  
發表評論

                   

                                      
                                         

               

              

                

                  
0條評論
   
                
 
                      

              

           
           

              
 
                

                    
                    
Dongjie_Liu

                    
男|高級講師

                    
                    

                          
TA的文章

                          閱讀更多
                    

                      
                


                   
              
  

                  
最新活動
 
           
                             
              





                                
              

           

        
       
    
    
     

      
    

    
    

    
       
       

         
閱讀需要支付1元查看
  
         
     
       

      
  
    
    













<