BFC块级格式化上下文

一、BFC理解:

BFC(Block formatting context)块级格式化上下文。我的理解就是他是一个独立的大箱子,箱子内属于自己的一块区域,与外界无关;

二、如何触发BFC?(满足下列任意一个或多个条件即可)

  • 根元素,即html元素
  • float 的值不为none
  • overflow的值不是visible
  • position的值不是static \ relative
  • display 的值是inline-block \ table-cell \ flex \ table-caption \ inline-flex

三、BFC布局规则

  • 内部的Box会在垂直方向,一个接一个的放置
  • Box垂直方向的距离是由margin决定,属于同一个BFC的相邻的两个Box的margin 会发生重叠
  • BFC 的区域不会与float box重叠
  • BFC 是一个独立的容器,外界的元素不会影响里面的元素,反之也是如此
  • 计算BFC高度时浮动元素也会参与其中

四、使用场景

  1. 解决margin重叠的问题

    (margin重叠,未使用BFC)

    

 

 

    

 

 

    (依据 属于同一个BFC的相邻的两个Box的margin 会发生重叠,因此将其改变成两个BFC) 

        

 

 

      

 

  2、清除浮动(父元素没有设置高度,子元素浮动时,父元素高度失效)

    (未清除的情况)

    

    

 

    (清除后;依据 计算BFC高度时浮动元素也会参与其中 )

      

 

      

 

 

3、左右两栏布局,右边自适应

     

 

             

    (使用BFC;依据 BFC 的区域不会与float box重叠,让右侧单独成为一个BFC )

     

      

   

 

 

 

   

 看了https://blog.csdn.net/sinat_36422236/article/details/88763187这个文章之后自己也操练了一下

  

    

 

posted @ 2020-10-09 11:04  半萌小疯子  阅读(105)  评论(0编辑  收藏  举报