【BFC + 双飞翼和圣杯布局(扩展了解)】

BFC

• 即 Block Formatting Contexts (块级格式化上下文)，通俗一点来讲，可以把 BFC 理解为一个封闭的大箱子，箱子内部的元素无论如何翻江倒海，都不会影响到外部。

• BFC是一个特殊的块元素,只有块才可以成为BFC,但是不是所有的块都是BFC

• BFC的触发条件:

      根元素 html默认就是一个BFC
      添加浮动且float的值不为none ,就是BFC
      overflow的值不为visible就是BFC
      display的值为 inline-block/ table-cell/ table-caption/ flex/ inline-flex 就是BFC
      position的值为absolute或fixed就是BFC
  

• BFC的特性及应用

    1/ box垂直方向的距离由margin决定，属于同一个BFC的两个相邻box的margin会发生重叠（通过BFC来用于防止margin重叠）
    解决方法:
          只要2个div不属于同一个BFC,也就不会上下重叠
       只要给下面的box添加一个父元素且触发父元素为BFC即可
       1\  父元素添加浮动
       2\  父元素添加overflow
       3\  父元素添加display
       4\  父元素添加position
       
    2/ BFC的区域不会与float box发生重叠（通过此实现自适应两栏布局,三栏布局）
    两栏需求: 既要不重叠,又要右边自适应,(左边盒子:宽200px,添加左浮动)
    1: 添加浮动,设置宽度百分比
              float:left;
              width: calc(100% - 200px);
    2: overflow: auto;   代码最精简
    3: 用display转化
              display: inline-block;
              width: calc( 100%- 200px);
    4:重点
             display: flex;
    5:
            display: inline-flex;
            width: calc( 100%- 200px);
    6:用定位
          position: absolute;
          left: 200px;
          width: calc(100% - 200px);
     三栏需求:(中间自适应,左右宽200px)
         1\  三栏都加左浮动,中间加个宽 width: calc(100% - 400px);
         2\  左加左浮动,右加右浮动,中间用overflow(值只要不是visable都可以) 中间右边的div顺序换一下,需要换布局
         3\  左加左浮动,右加右浮动,中间用display(不能是block),加个宽   width: calc(100% - 400px);
         4\  左加position(top:0;left:0;),右加position(top:0;right:0;),中间用position(left:左边宽;top:0;),设置 width: calc(100% - 400px);
  
    3/ 计算BFC的高度时，浮动元素也参与计算（父元素成为BFC用于清除内部浮动）
        1:给父元素添加浮动,虽然可以解决高度塌陷的问题,但是不好的是引发了新的浮动问题.
         2:overflow:hidden; 虽然解决高度塌陷,但是不适合跟定出去的效果使用,因为这个盒子有溢出隐藏的作用,会把溢出的隐藏的.
         3:overflow:auto; 虽然能解决高度塌陷,但是不适合内部的东西超出,因为该属性声明有超出的除滚动条.
         4:overflow:scroll; 虽然能解决高度塌陷,但是有滚动栏不好看.
         5:display:inline-block; 
         6:position:fixed;
    4/  BFC中的盒子会在垂直方向一个接一个的放置(因为整个html标签是一个BFC)
    5/ 每个元素通过margin移动位置时,是从盒子内部开始的,不是从边框开始的 
    6/ BFC就是页面上的一个独立容器,容器里面的元素不会影响到外面的元素.
  

双飞翼和圣杯布局

• 双飞翼布局,是左边的盒子和右边的盒子跟中间的盒子是有重叠部分的,这个名字是把它比喻成鸟了,中间就是鸟的身体,左右就是翅膀,翅膀和身体是连接的.

• 圣杯布局,是左边的盒子和右边的盒子跟中间的盒子是没有重叠部分的,叫这个名字是把它比喻成杯子,中间的主体和两边的杯耳相互连接没有很重要,是独立的3块,没有重叠部分

  • 这2个从最终的视觉效果上看是一模一样的