之前页面布局主要学的是基于layui的栅格布局及后台布局，基于html本身的布局了解不多，目前网上介绍较多的是基于display + position + float的布局、flex布局等（参考文献2更为详细地介绍了各类网页布局，有兴趣的可以了解），本文主要学习并记录参考文献1中基于display + position + float的网页布局，由于主要用到float属性，因此文章题目就写成了基于float属性的常用DIV+CSS布局。
主要涉及的CSS知识点如下：
1）float属性：指定页面元素（盒子）是否在父元素中浮动，默认值为none，可取值为none、left、right、inherit，取值为inherit时从父元素继承 float 属性值，取值为left时元素向左浮动直至碰到另一浮动元素或父元素的边框，取值为right时类似left，只是变成了向右浮动。float属性只能控制水平方向浮动，无法控制竖直方向浮动；
2）margin属性：设置元素的边界（外边距），值可以为数值或百分比，也可以为Autofac，此时由浏览器计算边界值；可以设置1到4个值，为1个值时设置的是上下左右四个边界值，为2个值时设置的是上下、左右边界值，为3个值时设置的是上、左右、下边界值，为4个值时设置的是上、右、下、左边界值；
position属性：设置元素的定位方式，可选值为static、relative、absolute、fixed等（详见参考文献3），本文中主要用到relative，之前一直以为relative的定位是相对父元素原点，学习参考文献1过程中才发现是相对于元素的正常位置进行移动。
最后是常用布局的示例代码及页面效果，主要参照自参考文献1，也百度了一些文章对照测试：
单列居中对齐
可以设置margin的左右边界值为auto自动居中，也可以通过position为relative，然后设置left和margin-left值达到居中效果，left设置当前元素的左侧位置为父元素宽度的一半，然后margin-left设置将当前元素向左侧移动元素宽度的一半。
html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>示例</title>
<style>
body{
background-color: lightgoldenrodyellow;
}
.middle{
width: 60%;
height: 200px;
background-color: lightblue;
margin: 0px auto;
}
</style>
</head>
<body>
<div class="middle">
单列居中对齐
</div>
</body>
</html>
html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>示例</title>
<style>
body{
background-color: lightgoldenrodyellow;
}
.middle{
width: 400px;
left: 50%;
margin-left: -200px;
height: 200px;
background-color: lightblue;
position: relative;
}
</style>
</head>
<body>
<div class="middle">
单列居中对齐
</div>
</body>
</html>
两列并排
html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>示例</title>
<style>
body{
background-color: lightgoldenrodyellow;
}
.left{
width: 200px;
height: 200px;
float: left;
background-color: lightblue;
}
.right{
height: 200px;
background-color: lightpink;
}
</style>
</head>
<body>
<div class="left">
左列宽度固定
</div>
<div class="right">
右列宽度自动调整
</div>
</body>
</html>
三列并排
html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>示例</title>
<style>
*{
margin: 0px;
border: 0px;
padding: 0px;
}
body{
background-color: lightgoldenrodyellow;
}
.left{
width: 200px;
height: 200px;
position:absolute;
top: 0px;
left: 0px;
background-color: lightblue;
}
.middle{
height: 200px;
margin: 0px 200px 0px 200px;
background-color:lightgreen;
}
.right{
width: 200px;
height: 200px;
position:absolute;
top: 0px;
right: 0px;
background-color: lightpink;
}
</style>
</head>
<body>
<div class="left">
左列宽度固定
</div>
<div class="middle">
中间宽度自动调整
</div>
<div class="right">
右列宽度固定
</div>
</body>
</html>
带标题、页脚，中间三列的布局
html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>示例</title>
<style>
*{
margin: 0px;
border: 0px;
padding: 0px;
width: 100%;
height: 100%;
}
.whole{
height: 95%;
}
.top{
background-color:lightgray;
height: 10%;
width: 100%;
}
.main{
height: 80%;
}
.left{
width: 20%;
float: left;
background-color: lightblue;
}
.middle{
width: 60%;
float: left;
background-color:lightgreen;
}
.right{
background-color: lightpink;
}
.footer{
background-color: lightcoral;
height: 10%;
width: 100%;
}
</style>
</head>
<body>
<div class="whole">
<div class="top">顶部标题栏</div>
<div class="main">
<div class="left">左列内容</div>
<div class="middle">中间内容</div>
<div class="right">右列内容</div>
</div>
<div class="footer">页脚信息</div>
</div>
</body>
</html>
参考文献：
[1]《DIV+CSS3网页样式与布局全程解密》