BFC知识总结

1、基本概念

      BFC(Block formatting context)，翻译为“块级格式化上下文”。它是一个独立的渲染区域，会形成一个独立的块，内部元素不影响外部，外部元素也不影响内部。

     Box，盒子，是CSS布局的基本对象和单位，元素的类型和display的属性决定这个盒子的显示类型

块级元素，指display属性为block、list-item、table的元素

行内元素，指display属性为inline、line-table、line-block、line-flex等的元素

line不能设置宽高，且padding、margin只在水平方向上起作用，垂直方向上不起作用

line-block、line-table、line-flex是行内块，可以设置宽高，padding、margin都能起作用

2、BFC布局规则

1、内部的元素在垂直方向，一个接一个放置，每个元素独占一行

2、块元素垂直方向的总距离由margin决定，在同一个BFC内的两个相邻元素垂直方向上的距离会发生重叠/合并，但是水平方向的不会

3、BFC渲染的区域，不会与float浮动定义的元素区域重叠

4、计算BFC高度时，内部浮动元素的高度也会计算在内

3、如何形成BFC

1、float的值不为none

2、position的值不为static或者relative

3、display的值是inline-block、table-cell、flex、table-caption或者inline-flex

4、overflow的值不为visible

4、应用解决问题

1、避免垂直方向的margin合并

       步骤一：用一个外围div包裹下方的元素

       步骤二：

         第一种方法：新外层元素设置overflow:hidden

            缺点：如果内部有元素必须溢出，会冲突

         第二种方法：新外层元素添加::before{content:'';display:table}

2、避免垂直方向的margin溢出

       方案一：设置父元素的overflow:hidden

             缺点：如果内部有元素必须溢出，会冲突

       方案二：利用父元素的padding-top代替子元素的margin-top

            padding会影响父元素高度，需要设置box-sizing:border-box

       方案三：为父元素添加上边框，设置透明

             但是border需要有宽度才能起作用，1px的边框会对布局产生影响

       方案四：在父元素内第一个子元素位置添加一个空的<table></table>

       方案五：父元素设置::before{content:'';display:table;}

3、防止高度坍塌

       高度坍塌产生的原因

         父元素没有设置高度，父元素内的子元素全部设置浮动，就会导致父元素的高度坍塌

       方案一：父元素设置overflow:hidden，行成BFC

          缺点：如果父元素内存在定位等子元素需要溢出时，会冲突

       方案二：父元素也设置浮动

          缺点：会造成新的浮动问题，影响下方元素的显示

       方案三：父元素的最后添加一个空的子元素，空子元素设置clear:both;

          缺点：平白多出来一个空标签，不太好，也不利于元素查询

       方案四：父元素设置::after{content:'';display:block;clear:both;}

4、自适应两栏布局（左定宽，右自适应）

       方案一：left设置float:left；right设置overflow:hidden；右侧行成BFC，独立渲染，不与左侧渲染区域重叠

       方案二：left设置float:left；right设置margin-left的值为左侧的宽度，此时right的宽度为auto

       方案三：弹性布局，left设置宽度，right设置flex:1;

       方案四：父元素设置relative定位，left设置宽度，right设置position定位，left值为左侧的宽度，其他值为0；

5、自适应三栏布局（左右定宽，中间自适应）

        方案一：弹性布局，left和right设置宽度，center设置flex:1;

        方案二：position实现，left定位左边，right定位右边，center设置margin左右的值为左右的宽度

        方案三：float实现，left左浮动，center右浮动，right不设置宽度，设置overflow:hidden;行成BFC