CSS多种布局方式自我实现-三栏布局（一）

一、float实现三栏布局

1、HTML代码：

<!DOCTYPE html>
<html>
<head>
<meta name="description" content="第一个三栏布局" />
  <meta charset="utf-8">
  <title>JS Bin</title>
</head>
<body>
  <div id="container">
    <div id="topbar">This is topbar</div>
    <div id="navbar">This is nav bar</div>
    <div id="main">
      <div id="column_left">This is column_leftThis is column_leftThis is column_leftThis is column_leftThis is column_leftThis is column_leftThis is column_leftThis is column_leftThis is column_leftThis is column_left</div>
      <div id="column_right">This is column_rightThis is column_rightThis is column_rightThis is column_rightThis is column_rightThis is column_rightThis is column_right</div>
      <div id="column_right_adsense">This is column right adsense This is column right adsense This is column right adsense</div>
      <div id="clear">this is clear</div>
    </div>
    <div id="footer">This is footer</div>
  </div>
</body>
</html>

2、CSS代码：

*{
  font-size:12px;
  padding: 0;
  margin:0;
}
body{
  background-color: #eee;
}
#container{

  background-color: #83A82B;

  width:500px;
  margin:50px auto;
}
#topbar{
  height:25px;
  background-color: #31DB20;
}
#column_left{
  float:left;
  width:250px;
  background-color: red;
}
#column_right{

  width:150px;
  background-color: #0f0;
  float:left;
}
#column_right_adsense{
  background-color: #00f;
  float:left;
  width:100px;
}
#clear{
  clear:both;
  background-color: pink;
}
#footer{
  background-color: piple;
}

3、结果展示：

三栏布局

4、注意事项

container、main不直接设置height,由内容区撑起高度，float后加clear元素清除浮动，撑起#main区高度。

5，以上实现方式的缺点

由于main宽度的固定，一旦某一栏添加了padding或margin,则会导致浮动栏下滑（浮动滑移），添加大图片或是没有空格的长字符串也都会打乱布局。

滑动漂移

6，滑动漂移的三种解决办法

6.1 从设定的元素宽度中减去padding或margin的影响。

如：column_left增加padding:1px,则将其宽度减去2px，效果如下：

元素宽度减去影响值

但是此方法操作起来比较麻烦，每次添加需要计算影响并修改代码。

6.2 在元素内部添加新div包裹元素内容

设置padding和margin时应用于这个元素。部分代码如下：
HTML:
<div id="column_left"><div id="column_left_inner">This is column_leftThis is column_leftThis is column_leftThis is column_leftThis is column_leftThis is column_leftThis is column_leftThis is column_leftThis is column_leftThis is column_left</div></div>
CSS:
#column_left_inner{ padding:10px; margin:10px; }

元素内部再嵌套div包裹内容

此方法较上一种方法更为简单。

6.3 box-sizing:border-box

为容器内各元素设置box-sizing:border-box,将盒模型改为IE盒模型，即盒子宽度=content area+padding+border;注意此方法无法解决margin造成的布局打乱。
部分CSS代码

#column_left{
  box-sizing:border-box;
  float:left;
  width:250px;
  background-color: red;
  padding:10px;
  border:3px solid black;
}
#column_right{
  box-sizing:border-box;
  width:150px;
  background-color: #0f0;
  float:left;
}
#column_right_adsense{
  box-sizing:border-box;
  background-color: #00f;
  float:left;
  width:100px;
}

效果图：

box-sizing:border-box

此方法最为简单，但是不能消除margin的设置引起的布局混乱。

二、flex三栏布局

flex布局适用于线型布局，使用flex布局能直接有效的避免因padding或border等造成的布局混乱。使用方便，推荐使用此方法。
HTML代码：

<!DOCTYPE html>
<html>
<head>
<meta name="description" content="flex实现三栏布局" />
  <meta charset="utf-8">
  <title>JS Bin</title>
</head>
<body>
  <div id="container">
    <div id="topbar">This is topbar</div>
    <div id="navbar">This is nav bar</div>
    <div id="main">
      <div id="column_left">This is column_leftThis is column_leftThis is column_leftThis is column_leftThis is column_leftThis is column_leftThis is column_leftThis isdafsssssssssssssssssssssssssssssssssssssssssssssssssssss column_leftThis is column_leftThis is column_left</div>
      <div id="column_right">This is column_rightThis is column_rightThis is column_rightThis is column_rightThis is column_rightThis is column_rightThis is column_right</div>
      <div id="column_right_adsense">This is column right adsense This is column right adsense This is column right adsense</div>

    </div>
    <div id="footer">This is footer</div>
  </div>
</body>
</html>

CSS代码：

*{
  font-size:12px;
  padding: 0;
  margin:0;
}
body{
  background-color: #eee;
}
#container{

  background-color: #83A82B;

  width:500px;
  margin:50px auto;
}
#topbar{
  height:25px;
  background-color: #31DB20;
}

#main{
  display:flex;
  flex-flow:row nowrap;
  
}
#column_left{
  background-color: #f00;
  flex-grow:1;
  width:150px;
  padding:10px;
}
#column_right{
  background-color: #0f0;
  flex-grow:1;
  width:150px;
}
#column_right_adsense{
  flex-grow:1;
  background-color: #00f;
  width:150px;
}


#footer{
  background-color: piple;
}

结果展示：

flex实现三栏布局

三、绝对定位实现三栏布局

1. HTML代码

<!DOCTYPE html>
<html>
<head>
<meta name="description" content="flex实现三栏布局" />
  <meta charset="utf-8">
  <title>JS Bin</title>
</head>
<body>
  <div id="container">
    <div id="topbar">This is topbar</div>
    <div id="navbar">This is nav bar</div>
    <div id="main">
      <div id="column_left">This is column_leftThis is column_leftThis is column_leftThis is column_leftThis is column_leftThis is column_leftThis is column_left</div>
      <div id="column_center">This is column_rightThis is column_rightThis is column_rightThis is column_rightThis is column_rightThis is column_rightThis is column_right</div>
      <div id="column_right">This is column right adsense This is column right adsense This is column right adsense</div>

    </div>    <!--main完-->
    <div id="footer">This is footer</div>
  </div>
</body>
</html>