背景👇

在flex布局泛滥的前端布局下，记录下全屏布局，两列布局，三列布局的非flex实现形式，但是也会带上flex的实现方式，能用flex实现的布局为什么还要了解非flex方式，这就涉及到很多方面啦，例如：接手旧代码👎，面试八股文✊等等情况，这都不得不让你了解到其他布局的实现方式。

🖐全局布局

经典的全局布局由顶部，底部和主体三部分组成，其特性为三部分满屏拉伸，顶部底部高度固定，主题高度自适应

🤞1、position + left/right/top/bottom

通过left:0,right:0,左右满屏拉伸，top:0和bottom:0使顶部吸顶和底部吸底，然后主体top:50px,和bottom:50px可以高度自适应，布局固定，代码如下面的片段：

.fullScreen{
  position: relative;
  width: 400px;
  height: 400px;
  header,
  footer,
  main {
		position: absolute;
		left: 0;
		right: 0;
	}
  header{
                top: 0;
		height: 50px;
		background-color: #f66;
}
   main{
		top: 50px;
		bottom: 50px;
		background-color: #3c9;
   }
   footer{
                bottom: 0;
		height: 50px;
		background-color: #66f;
   }
   }

🤏2、flex方式

具体主要通过flex:1来实现高度自适应,这里不多阐述🤭，具体看代码：

🐵两列布局

🦍1、overflow + float

左边先通过float使文档脱流，右列声明overflow:hidden使其形成BFC区域与外界隔离。

.two-column-layout{
  width: 400px;
  height: 400px;
  .left{
    float: left;
    width: 100px;
    height: 100%;
    background-color: #f66;
  }
  .right{
    overflow: hidden;
    height: 100%;
    background-color: #66f;
  }
}

🦧2、float + margin-left/right

左边先通过float使文档脱流，然后右边通过margin-left保证不会重叠

.two-column-layout{
  width: 400px;
  height: 400px;
  .left{
    float: left;
    width: 100px;
    height: 100%;
    background-color: #f66;
  }
  .right{
    margin-left: 100px;
    height: 100%;
    background-color: #66f;
  }
}

💪 3、flex

左列声明固定宽度，右列声明flex:1自适应宽度。

🐷三列布局

🐖圣杯布局

父节点声明padding为左右列留出空位，将左右列固定在空位中

.grail-layout{
        width: 400px;
	height: 400px;
        padding: 0 100px;
}
	.left {
                float: left;
		width: 100px;
		height: 100%;
                margin-left: -100px;
		background-color: #f66;
	}
	.right {
                float:right;
		width: 100px;
		height: 100%;
                margin-right: -100px;
		background-color: #66f;
	}
	.center {
                height: 100%;
		background-color: #3c9;
	}

🐏双飞翼布局

中列加入子节点并声明margin为左右列让出空位，将左右列固定在空位中

.grail-layout {
	width: 400px;
	height: 400px;
	.left {
		float: left;
		width: 100px;
		height: 100%;
		background-color: #f66;
	}
	.right {
		float: right;
		width: 100px;
		height: 100%;
		background-color: #66f;
	}
	.center {
		margin: 0 100px;
		height: 100%;
		background-color: #3c9;
	}
}

🦒flex实现三列

flex:1让左右两列宽度固定，中列宽度自适应