资讯专栏INFORMATION COLUMN

上云采购季！| 2核2G4M爆款云服务器低至59元/年，更有多台、长期优惠，快来选购！

立即前往
首页/文章专栏/前端必懂之熟悉又陌生的BFC

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

Dongjie_Liu / 1541人阅读 

写在最前：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
                                                         
                 

               
              

             
               

                   
 文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

                 
                   
转载请注明本文地址：https://www.ucloud.cn/yun/54786.html

               

                      
               
              
              

                
相关文章

                
              

              
               

                  
                  
发表评论

                   

                                      
                      

                        登陆后可评论
                      
                   

               

              

                

                  
0条评论
   
                
 
                      

              

           
           

              
 
                

                    
                    
Dongjie_Liu

                    
男|高级讲师

                    

                     
                                                                      
      
                                                                                        我要私信
                     
                                            
                    

                    

                          
TA的文章

                          阅读更多
                    

                      
                


                   
              
  

                  
最新活动
 
           
         

                    
                      
                    
                    
              





                                
              

           

        
       
    
    
     

      
    

    
    

    
       
       

         
阅读需要支付1元查看
  
         
     
       

      
  
    
    









<