IFC and BFC

Posted 2020-08-08 小蚊子飞

BFC  and  IFC
         1，IFC -- 针对行内元素  --  行内格式上下文
            BFC --针对块级元素  -- 块级格式上下文
         2，IFC特点：
           行框的高度由包含元素的高度和有没有float元素决定。
           通常，行框的左边距接触到包含快的左边，右边距接触到包含块的右边
           浮动元素可能会处于包含块边缘与行框边缘之间  -- 缩短了可用宽度
         3，BFC特点：
            独立的区域，与外部毫不相干
         BFC布局规则：
          1，）内部的box会在垂直方向一个接一个的防放置
          2，）box垂直方向的距离由margin决定，属于同一个BFC的两个相邻box的margin会重叠
          3，）每个元素的左边与包含快的border box 左边相邻，及时浮动也如此
          4，）BFC的区域不会与float box重叠
          5，）BFC就是页面上的独立容器，不会影响外面的元素
          6，）计算BFC高度是=时，浮动元素也计算
         BFC的作用：一是自适应两栏布局
                    二是清除内部的浮动
                    三是放置margin重叠
        4，哪些会出发 BFC ？
          有五个：1，根元素
                  2，float不为none
                  3，position为absolute或fixed
                  4，display 为inline-block、table-cell、table-caption、flex inline-flex
                  5,overflow不为visible   --  通常用这个，因为这个对整体的影响最小
                  6，border有时也会触发
         5，之间的转换：BFC需要出发，IFC不需要转换，可将IFC转换为BFC