浮动在前端页面布局中比较常用基本操作，也能让行内元素变成块元素，支持宽高。以下是我总结的三例布局案例：
实例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>三例布局</title>
<style>
.box{
width: 100%;
height: 60px;
background-color:gainsboro;
}
.box1{
width: 1000px;
height: 60px;
background-color:gray;
margin: auto;
}
.box3{
width: 1000px;
height: 650px;
/* 居中对齐 */
margin: auto;
/* 相对定位 */
position: relative;
}
.box3 .left{
width: 200px;
height: 650px;
background-color: deepskyblue;
/* 绝对定位 头部0 左边0像素 */
position: absolute;
top: 0;
left: 0;
/* 左浮动 */
/* float: left; */
}
.box3 .right{
width: 200px;
height: 650px;
background-color: chartreuse;
/* 绝对定位 头部0 右边0像素 */
position: absolute;
top:0;
right: 0;
/* 右浮动 */
/* float: right; */
}
.box3 .cent{
width: 600px;
height: 650px;
background-color: burlywood;
/* 绝对定位 头部0 从左边向右移200个像素 */
position: absolute;
top: 0;
left: 200px;
/* 左浮动 */
/* float: left; */
}
</style>
</head>
<body>
<div class="box">
<div class="box1"></div>
</div>
<div class="box3">
<div class="left"></div>
<div class="right"></div>
<div class="cent"></div>
</div>
<div class="box">
<div class="box1"></div>
</div>
</body>
</html>运行实例 »
点击 "运行实例" 按钮查看在线实例
执行效果：
