java float 是多少位

圣杯布局是经典的css布局，左右两栏的宽度固定不变，中间那一栏是自适应，下面将用felx、float、position三种方法进行圣杯布局 效果图：left和right是定宽，middle是自适应的

body代码：

"box"> 
   
 
    "left"> 
   
 
    
   
 
    "right"> 
   
 
    
   
 
    "middle"> 
   
 
    
   
  

1. 圣杯布局之flex：

left和right定宽为200px，middle自适应

给middle设置弹性布局display:flex;

left和right定宽200px，middle设置为flex:1;

css代码：

header{
      height: 80px;
      background-color: #cccccc;
    }
    .box{
      height: 200px;
      background-color: yellow;
      display: flex;
    }
    .box .middle{
      height: 200px;
      background: pink;
      flex: 1;
    }
    .box .left{
      width: 200px;
      height: 200px;
      background-color: red;
    }
    .box .right{
      width: 200px;
      height: 200px;
      background-color: purple;
    }
    footer{
      height: 100px;
      background-color: black;
      color: white;
    }



header{
      height: 80px;
      background-color: #cccccc;
    }
    .box{
      height: 200px;
      background-color: yellow;
      display: flex;
    }
    .box .middle{
      height: 200px;
      background: pink;
      flex: 1;
    }
    .box .left{
      width: 200px;
      height: 200px;
      background-color: red;
    }
    .box .right{
      width: 200px;
      height: 200px;
      background-color: purple;
    }
    footer{
      height: 100px;
      background-color: black;
      color: white;
    }

2. 圣杯布局之float

将left进行浮动靠左，将right进行浮动靠右

css代码：

header{
      height: 80px;
      background-color: #cccccc;
    }
    .box{
      height: 200px;
      background-color: yellow;
    }
    .box .left{
      width: 200px;
      height: 200px;
      background-color: red;
      float: left;
    }
    .box .right{
      width: 200px;
      height: 200px;
      background-color: purple;
      float: right;
    }
    .box .middle{
      height: 200px;
      background-color: pink;
    }
    footer{
      height: 100px;
      background-color: black;
      color: white;
    }


header{
      height: 80px;
      background-color: #cccccc;
    }
    .box{
      height: 200px;
      background-color: yellow;
    }
    .box .left{
      width: 200px;
      height: 200px;
      background-color: red;
      float: left;
    }
    .box .right{
      width: 200px;
      height: 200px;
      background-color: purple;
      float: right;
    }
    .box .middle{
      height: 200px;
      background-color: pink;
    }
    footer{
      height: 100px;
      background-color: black;
      color: white;
    }

3. position

*{
            margin: 0;
            padding: 0;
            color: black;
            font-size: 45px
        }
        .main div{
            box-sizing: border-box;
        }
        .main{
            width: 100%;
            background: red;
            position: relative;
            padding-left: 200px;
            padding-right: 200px;
            box-sizing: border-box;
        }
        .center{
            width: 100%;
            background: pink
        }
        .left{
            background: yellow ;
            width: 200px;
            position: absolute;
            left: 0;
            top: 0;
        }
        .right{
            background: blue ;
            width: 200px;
            position: absolute;
            top: 0;
            right:0
        }
<div class="main">
    <div class="center">z中间div>
    <div class="left">左div>
    <div class="right">右div>
div>

        *{
            margin: 0;
            padding: 0;
            color: black;
            font-size: 45px
        }
        .main div{
            box-sizing: border-box;
        }
        .main{
            width: 100%;
            background: red;
            position: relative;
            padding-left: 200px;
            padding-right: 200px;
            box-sizing: border-box;
        }
        .center{
            width: 100%;
            background: pink
        }
        .left{
            background: yellow ;
            width: 200px;
            position: absolute;
            left: 0;
            top: 0;
        }
        .right{
            background: blue ;
            width: 200px;
            position: absolute;
            top: 0;
            right:0
        }
<div class="main">
    <div class="center">z中间div>
    <div class="left">左div>
    <div class="right">右div>
div>

总的来说，我认为使用弹性盒子布局实现圣杯模式是最方便最快速且不用担心移动端的适配问题。