这篇文章主要介绍了css实现页面一列布局，两列布局与三列布局的方法示例,包括宽度与高度的自适应的示例,需要的朋友可以参考下：
1.一列布局（又叫单列布局）
一列布局需要掌握3个知识点：标准文档流，其中又包含了块级元素和行级元素，还有margin属性，可以说实现一列布局的关键代码就是由margin属性实现的，通过设置margin:0 auto;来实现水平居中，auto就是它会根据浏览器的宽度自动设置两边的外边距。要设置margin，你首先得有一个盒子模型，比如这里的div，然后设置它的长宽，有一个固定的大小，才可以实现居中。
<style type="text/css">
body{margin:0;padding:0;}
.head{heigth:200px;background:blue;}
.main{height:500px;width:800p;margin:0 auto;}
.footer{background:blue;height:200px;width:800px;margin:0 auto;}
</style>
<div class="head"> This is head !</div>
<div class="main"> This is main !</div>
<div class="footer"> This is footer !</div>2.二列布局（两列自适应）
浮动：
块级元素都是一行一行这样排列的，需要把两个块级元素并排时，就需要用到CSS中的浮动布局float，float有三个属性值，
left-左浮动，right-右浮动，none-不浮动，一旦设置了float属性，元素就会对应的向左移，或向右移，直到碰到容器边缘，
当元素没有内容但是设置了浮动属性时，元素的宽度就随内容的变化而变化。
清除浮动的常用方法是：clear：both；（为需要清楚浮动的元素设置）如果你清楚的知道设置了那种浮动，也可以clear：right/left，一般都用both，保障浮动被清除；还有另外一种清除浮动的方法，width:100%;overflow:hidden;
<style type="text/css">
body{margin:0;padding:0;}
.main{width:800px;margin:0 auto;}
.left{width:20%;height:500px;background:blue;float:left;}
.right{width:80%;background:red;height:500px;float:right;}
</style>
<div class="main">
<div class="left"> This is left !</div>
<div class="right"> This is right !</div>
</div>添加了父级div后，right和left块就被限制在父级块中，父级块宽度是固定的，则左右两块的宽度也随之固定，但是如果父级块的宽度改变，则左右两块也会随之改变，且比例还是2：8，这个是固定不变的。
3.三列布局
position可设置4个属性值，分别为：static（静态定位），relative（相对定位），absolute（绝对定位），fixed（固定定位）
三列布局自适应，将上述两列布局中的比例更改为33.33%即可，那么以此类推，四列布局自适应也可以用一样的方法，调整比例分配，从而实现自己想要的布局方式。
立即学习“前端免费学习笔记（深入）”；
<style type="text/css">
body{margin:0;padding:0;}
.main{width:800px;margin:0 auto;}
.left{width:33.33%;height:500px;background:blue;float:left;}
.middle{width:33.33%;height:500px;background:black;float:left;}
.right{width:33.33%;background:red;height:500px;float:right;}
</style>
<div class="main">
<div class="left"> This is left !</div>
<div class="middle"> This is middle !</div>
<div class="right"> This is right !</div>
</div>另外一种情况是，左右两块的宽度都是固定的分别为200px，300px，而中间是自适应的。这种情况下就不能通过float来实现了，此时我们需要对左右两块进行绝对定位，然后设置中间块的margin，则可以实现要求。如果你想让中间和左右两块不要紧密贴合，则可以在设置margin（上，右，下，左）时，把像素适当的提高。实现方式如下：
注意left:0;top:0；right:0;top:0; 这些设置是必须的，不加就会出问题，亲测
<style type="text/css">
body{margin:0;padding:0;}
.main{width:800px;margin:0 auto;}
.left{width:200px;height:500px;background:blue;position:absolute;left:0;top:0;}
.middle{height:500px;background:black;margin:0 300px 0 200px;}
.right{width:300px;background:red;height:500px;position:absolute;right:0;top:0;}
</style>
<div class="main">
<div class="left"> This is left !</div>
<div class="middle"> This is middle !</div>
<div class="right"> This is right !</div>
</div>在网页设计中，我们更多的是将上述布局方式进行混合，比如在一列布局的main块中插入二列或者三列布局，代码和上基本一致
使用BFC的原理实现
BFC的规则之一，就是BFC区域，不会与float box重叠，因此我们可以利用这一点来实现3列布局。
css代码如下
.left {
float: left;
margin-right: 10px;
width: 100px;
height: 100px;
background-color: orange;
}
.rightright {
float: rightright;
margin-left: 10px;
width: 100px;
height: 100px;
background-color: orange;
}
.main {
height: 100px;
background-color: green;
overflow: hidden;
}html代码如下
<div class="left"></div> <div class="right"></div> <div class="main"></div>
双飞翼布局
这种布局方案最早由淘宝提出，主要为了主列能够被最先加载。
实现原理：
（1）让主列外面添加一个wrap，主列wrap，以及2子列都左浮动。
（2）设置主列wrap宽度为100%，将子列的margin-left设置为负值，让子列能够排列在左右两侧。
（3）这是主列的margin-left与margin-right比左右两列的宽度大一点，则可以设置出来主列与子列之间的间隙。
css代码如下
.wrap {
width: 100%;
}
.wrap::after {
display: block;
content: '';
font-size: 0;
height: 0;
clear: both;
zoom: 1;
}
.main-content {
float: left;
width: 100%;
}
.main {
height: 100px;
background-color: green;
margin-left: 110px;
margin-right: 110px;
}
.left {
float: left;
width: 100px;
height: 100px;
background-color: orange;
margin-left: -100%;
}
.rightright {
float: left;
width: 100px;
height: 100px;
background-color: orange;
margin-left: -100px;
}html代码如下
<div class="wrap">
<div class="main-content">
<div class="main"></div>
</div>
<div class="left"></div>
<div class="right"></div>
</div>圣杯布局
圣杯布局在结构上要简单一点，也能够让主列优先加载。
实现原理：
（1）添加一个包裹框，设置padding-leftpadding-right值，比子列宽度大一个空隙的宽度。
（2）主列，子列都设置为float: left 左子列margin-left设置为-100%，并且设置为position:relative; left: -110px将左子列放置到左侧。右子列同理。
（3）主列只需设置宽度为100%即可。包裹框的宽度不要设置为100%，自适应即可。
css代码如下
.wrapper {
padding-left: 110px;
padding-right: 110px;
overflow: hidden;
}
.main {
float: left;
width: 100%;
height: 100px;
background-color: #ccc;
}
.left {
float: left;
width: 100px;
height: 100px;
margin-left: -100%;
position: relative;
left: -110px;
_left: 0;
background-color: orange;
}
.rightright {
float: left;
width: 100px;
height: 100px;
background-color: orange;
margin-left: -100px;
position: relative;
rightright: -110px;
}html代码如下
<div class="wrapper"> <div class="main"></div> <div class="left"></div> <div class="right"></div> </div>
