浮动实现三栏布局

1.什么是三栏布局

所谓三栏布局就是：左右两侧的宽度固定，中间部分的宽度随窗口的宽度变化而自适应。

2.浮动实现三栏布局

float最初的设计的初衷是为了解决文字环绕的问题即给一个图片设置float属性之后会使文字环绕在图片周围显示。float之所以可以实现文字环绕是源于设置float属性的元素可以脱离文档流，使父元素高度塌陷。

2.1html写法

左栏和右栏顺序可以颠倒，中间栏必须放在最下面

<div class="main">
    <div class="left">左</div>
    <div class="right">右</div>
    <div class="center">中
        <h2>浮动布局</h2>
    </div>         
</div>

2.2css写法

.left{
    float: left;
    width: 300px;
    height: 100px;
    background: #631D9F;
}
.right{
    float: right;
    width: 300px;
    height: 100px;
    background: red;
}
.center{
    margin-left: 300px;
    margin-right: 300px;
    background-color: '#'4990E2;
}

//清除浮动
.main::after{
    content: "";
    display: block;
    height: 0;
    clear:both;
    visibility: hidden;

}

左栏左浮动，右栏向右浮动中间栏设置左右margin为两栏宽度,实现居中显示

由于我们使用了float, 所以为了不影响其他元素的显示这里需要清除浮动,清除浮动的方式有很多大家可以自行搜索使用我这里使用伪元素的方式

3.绝对定位实现三栏布局

3.1首先先写html模版

<div class="main">
    <div class="center"></div>
    <div class="left"></div>
    <div class="right"></div>
</div>

我们需要选择给左中右都使用 absolute 绝对定位由于absolute 是相当于static定位以外的第一个父元素进行定位，所以我们要给其父元素添加 position:relative属性, 这样这三个子元素可以相对于父元素进行绝对定位。

3.2接下来写css样式

.mian{
    position: relative;
    margin: auto;
}
.left{
    position: absolute;
    top: 0;
    left: 0;
    width: 200px;
    height: 200px;
    background: red;
}
.right{
    position: absolute;
    top: 0;
    right: 0;
    width: 250px;
    height: 200px;
    background: rgb(70, 44, 44);
}
.center{
    margin: 0 250px 0 200px;
    height: 200px;
    background: rosybrown;
}

4.margin负值法

4.1html模板

<div class="parent">
  <div class="center fl">
      <div class="main">Main</div>
  </div>
  <div class="left fl"></div>
  <div class="right fl"></div>
</div>

4.2css样式

 .parent{
  margin:auto;
  background:#09F;
 }
 .parent::after{
     content: "";
     display: block;
     clear: both;
 }
.left{
  width:200px;
  height:200px;
  background:'#'369;
  margin-left:-100%;
 }
 .right{
  width:250px;
  height:200px;
  background:#C0C;
  margin-left:-250px;
 }
 .center{
  background:#F00;
  width:100%;
 
 }
 .main{
  margin:0 250px 0 200px;
  height:200px;
 }
 .fl{
  float:left;
 }

使三栏浮动，并相对定位，给左容器设置200px的宽度，右容器设置250px宽度，中间的容器设置100%的宽度。
此时left和right被相对于父元素container宽度的100%的center挤到下面。
把left放在center上方：由于浮动的原因，给left设置margin-left:100%即可使左侧栏浮动到center上方，并位于center左侧之上。
同样设置right margin-left:-200px,这里的长度等于right的长度。
这时center的两侧被left和right覆盖了，因此给container设置padding：0 250px 0 200px
由于left和right也同时往中间缩，因为给left和right分别设置left:-200px;right:-200px,往两侧分别偏移自身的宽度去覆盖掉contaniner使用padding后的空白位置。

总结

浮动布局简单，兼容性好，当中间内容高于两侧时，两侧高度不会随中间内容变高而变高，缺点是三栏高度不统一，center区域的内容要在最后渲染
绝对定位简单、粗暴，采用了absolute，导致父元素脱离了文档流，那所有的子元素也需要脱离文档流。如果页面复杂，那开发的难度可想而知。
margin负值法,兼容性好,中间部分在最上面，可以保证优先渲染

css三栏布局