经典圣杯模式-css布局

随着flex布局的流行，越来越少的人不在用浮动和定位进行样式布局了。今天用负数css样式完成圣杯样式布局，感觉逻辑一定要清晰，不然真容易写错，记录一下 ~ ~ ~ ~ ~ ~
首先确立目标，我们要完成：
1.先把页面架构搭建完成(html部分)：

 <div class="warp">
    <div class="top">123</div>
    <div class="main clearfix">
      <div class="left">111<br/><br/><br/></div>
      <div class="center">222<br/><br/><br/><br/><br/><br/><br/><br/><br/></div>
      <div class="right">333</div>
    </div>
    <div class="foot">123</div>
  </div>

2.css布局部分

<style>
  .warp{
   width:700px;
   margin: 0 auto;
   border:1px solid red;
  }
	//头部、底部样式
  .top ,.foot{
   height: 50px;
   background-color: skyblue;
  }
  //清除内容区域浮动
  .clearfix ::after{
    content: '';
    display: table;
    clear: both;
  }
  //内容主体部分
  .main{
    padding: 0 100px;  //给出左右2边的空间
    overflow: hidden; //多余的部分隐藏
  }
  //浮动布局
  .main .left, .main .center,.main .right{
   float: left;
   position: relative;//**重点是给自身相对定位
  background-color: orange;
  margin-bottom: -4000px;//***给底部边距
  padding-bottom: 4000px;//***用padding补回给的边距

  }
  .main .left{
    left: -100px;//给自己一个相对定位，把padding的位置占了
    width: 100px; 
  }
  .main .center{
    width: 100%;
    margin-left: -100px;
     background-color: red;
  }
  .main .right{
    left: 100px;//给自己一个相对定位，把padding的位置占了
    width: 100px; 
    margin-left: -100px;
    
  }
  </style>

完成之后的效果如图：

上面就是具体代码，重点的地方都表明注释了，希望感兴趣的人的给点个赞哦 ~ ~ ~