<!DOCTYPE html>
<html lang="en">
<head>
<style type="text/css">
.header,.footer{
width: 100%;
height: 60px;
background-color: lightgray;
/*文本居中*/
text-align: center;
}
.content{
width: 1000px;
margin: auto;
background-color: gray;
color: white;
text-align: center;
line-height: 60px;
}
.container{
height: 650px;
width: 1000px;
margin: auto;
background-color: #66ccff;
/*防止高度塌陷*/
overflow: hidden;
}
.main,.left,.right{
/*左侧浮动*/
float: left;
}
.left,.right{
width: 200px;
height: 650px;
}
.main{
height: 650px;
width: 100%;
background-color: wheat;
}
.left{
margin-left: -100%;
background-color: #66ccff;
}
.right{
margin-left: -200px;
background-color: green;
}
.center{
margin-left: 200px;
margin-right: 200px;
}
</style>
<meta charset="UTF-8">
<title>双飞翼布局</title>
</head>
<body>
<div class="header">
<div class="content">
网站头部
</div>
</div>
<div class="container">
<div class="main">
<div class="center">中间</div>
</div>
<div class="left">左侧</div>
<div class="right">右边</div>
</div>
<div class="footer">
<div class="content">
网站底部
</div>
</div>
</body>
</html>双飞布局基本思路
1、创建一个大的盒子 必须设置宽度
2、按照中间、左边、右边的顺序创建三个区块
3、设置三个区块的属性：3.1 三个区块都设置为左浮动（float:left） 3.2 中间部分宽度必须为100% 3.3 设置后左侧、右侧会被挤到下面中间的下面，按照以下设置恢复到正常位置设置左侧区块的margin-left:-100% 右侧区块的marginleft:-200px
<!--
浮动
1、父元素要设置overflow:hidden,不设置的时候会发生高度塌陷，造成父元素的高度无法包裹住子元素的高度
2、设置自己的float
-->
