css 布局

一左右布局

1.利用float，注意父级元素要清除浮动clearfix

<div class="box clearfix">
   <div class="box1"></div>
   <div class="box2"></div>
 </div>

.box{border:1px solid blue;}
.box1{width:50%;height:200px;background:red;float:left;}
.box2{width:50%;height:200px;background:black;float:left;}
.clearfix::after{content:'';display:block;clear:both;}

image.png

2.利用内联块元素,注意内联元素排在一起会有4px的间隙，在父级元素上使用font-size=0可以解决，另外当元素display：inline-block时需要使用vertical-align:top来解决有行高排列问题

image.png

.box{border:1px solid blue;font-size:0;}
.box1{width:50%;height:200px;background:red;display:inline-block;}
.box2{width:50%;height:200px;background:black;display:inline-block;}

3.利用绝对定位布局

.box{border:1px solid blue;position:relative;}
.box1{width:50%;height:200px;background:red; position:absolute; left:0;top:0;}
.box2{width:50%;height:200px;background:black;position:absolute; right:0;top:0;}

4.flex布局

.box{ border:1px solid blue;display:flex;}
.box1{width:50%;height:200px;background:red;}
.box2{width:50%;height:200px;background:black;}

image.png

二、左中右布局（三列布局）

1.三列水平布局，如果列的宽度都是固定的，实现方式与上面两列布局相似，使用浮动即可达到效果。

<div class="container">
  <div class="leftbox">左侧列</div>
  <div class="midbox">中间列</div>
  <div class="rightbox">右侧列</div>
</div>
.container{
width:150px;
height:150px;
border:1px solid }
.leftbox {width: 50px;height:100%;float: left;background:red ;}
.midbox {width: 50px;float: left;height:100%;background:blue;}
.rightbox {width: 50px;float: right;height:100%;background:green;}

image.png

leftbox和midbox设置左浮动，rightbox设置右浮动。但关键的是，三个子元素的总宽度不能大于或者等于父元素的宽度。

2 float+margin 方法

<style>
    *{padding:0;margin:0;border: 0;}
    .box{width:600px;overflow: hidden;}
    .div1{width:80px;height:300px;background-color: red;float: left;}
    .div2{height:300px;background-color: yellow;margin: 0px 100px; }
    .div3{width:80px;height:300px;background-color: black;float: right;}
</style>
<div class="box">
    <div class="div1"></div>
    <div class="div3"></div>
    <div class="div2"></div>
</div>

千万要注意！！！当非float的元素和float的元素在一起的时候，如果非float元素在先，那么float的元素将被排斥，所以div3和div2应该换个位置

3.flex布局

<style>
    .box{display: flex;width:400px;height:300px;}
    .div1{width:100px;height:300px;background-color: red;}
    .div2{flex: 1;height:300px;background-color: yellow}
    .div3{width:50px;height:300px;background-color: black}
</style>

4.绝对定位

<style>
    *{padding:0;margin:0;}
    .box{position: relative;width:400px;height:300px;}
    .div1,.div2{position: absolute;width:50px;height:300px;}
    .div1{left:0px;background-color: red;}   
    .div2{right:0px;background: black;}
    .div3{height:300px;background-color: yellow;}   
</style>

5.圣杯布局

<section class="layout grail">
        <h1>圣杯布局</h1>
        <article class="left-center-right">
            <div class="center">
                1.这是三栏布局的圣杯布局解决方案； 
                2.这是三栏布局的圣杯布局解决方案； 
                3.这是三栏布局的圣杯布局解决方案； 
                4.这是三栏布局的圣杯布局解决方案； 
                5.这是三栏布局的圣杯布局解决方案； 
                6.这是三栏布局的圣杯布局解决方案； 
                7.这是三栏布局的圣杯布局解决方案； 
                8.这是三栏布局的圣杯布局解决方案；
                9.这是三栏布局的圣杯布局解决方案；
            </div>
            <div class="left"></div>
            <div class="right"></div>
        </article>
    </section>

  <style>
        .layout.grail .left-center-right {
            padding: 0 300px;
            min-width: 304px;
        }
        .layout.grail .left-center-right>div {
            float: left;
            min-height: 100px;
        }
        .layout.grail .center {
            background: yellow;
        }
        .layout.grail .left {
            margin-left: -100%;
            width: 300px;
            background: red;
            position: relative;
            left: -300px;
        }
        .layout.grail .right {
            margin-left: -300px;
            width: 300px;
            background: blue;
            position: relative;
            right: -300px;
        }
    </style>

image.png

6.双飞翼布局

<section class="layout ued">
        <h1>双飞翼布局</h1>
        <article class="left-center-right">
            <div class="wrap">
                <div class="center">
                    1.这是三栏布局的双飞翼布局解决方案； 
                    2.这是三栏布局的双飞翼布局解决方案； 
                    3.这是三栏布局的双飞翼布局解决方案； 
                    4.这是三栏布局的双飞翼布局解决方案； 
                    5.这是三栏布局的双飞翼布局解决方案； 
                    6.这是三栏布局的双飞翼布局解决方案； 
                    7.这是三栏布局的双飞翼布局解决方案； 
                    8.这是三栏布局的双飞翼布局解决方案；
                    9.这是三栏布局的双飞翼布局解决方案；
                </div>
            </div>
            <div class="left"></div>
            <div class="right"></div>
        </article>
    </section>

 <style>
        .layout.ued .left-center-right>div {
            float: left;
        }
        .layout.ued .wrap {
            margin-left: 300px;
            margin-right: 300px;
        }
        .layout.ued .center {
            background: yellow;
        }
        .layout.ued .left {
            background: red;
            min-height: 100px;
            width: 300px;
            margin-left: -100%;
        }
        .layout.ued .right {
            background: blue;
            min-height: 100px;
            width: 300px;
            margin-left: -300px;
        }
    </style>

image.png

圣杯布局和双飞翼布局解决问题的方案在前一半是相同的，也就是三栏全部float浮动，但左右两栏加上负margin让其跟中间栏div并排，以形成三栏布局：

不同在于解决”中间栏div内容不被遮挡“问题的思路不一样：圣杯布局为了中间div内容不被遮挡，将中间div设置了左右padding-left和padding-right后，将左右两个div用相对布局position: relative并分别配合right和left属性，以便左右两栏div移动后不遮挡中间div；而双飞翼布局为了中间div内容不被遮挡，直接在中间div内部创建子div用于放置内容，在该子div里用margin-left和margin-right为左右两栏div留出位置。