双飞翼布局和圣杯布局类似 都是在html页面里面把main主体放在前面加载 left和right放在后面加载
和圣杯相比会在main中间的主体部分外面再套一个div
布局的时候设置这个外层div,然后再设置left和right 最后设置全部浮动. 最后在main元素里面设置padding 把左右两边留200px 吧内容挤到中间部分 两边的200px留给left和right.
双飞翼布局不需要在main外层套一个div main left right 全部浮动和设置好以后,left fight两个元素需要设置相对定位 相对自身的位置来调整位置 达到预期效果
下面是双飞翼布局代码
实例
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>双飞翼布局</title>
<style>
body{
margin: 0;
}
.layout{
width: 1000px;
margin: 0 auto;
background-color: #656565;
min-width: 600px;
}
/*头部*/
.header, .footer{
height: 60px;
background-color: black;
}
.header li{
list-style: none;
}
.header ul{
margin: 0;
}
.header a{
color: white;
float: left;
margin: 0 10px;
height: 60px;
width: 80px;
line-height: 60px;
text-align: center;
text-decoration: none;
}
.header a:hover{
color: red;
font-size: 1.2rem;
}
/*双飞翼布局*/
/*主体*/
.container{
width: 1000px;
height: 600px;
background-color: #AF3434;
}
.content{
width: inherit;
height: inherit;
}
.left{
width: 200px;
height: 600px;
background-color: #3580eb;
}
.right{
width: 200px;
height: 600px;
background-color: #ffc09f;
}
.content,.left,.right{
float: left;
}
.left{
margin-left: -100%;
}
.right{
margin-left: -200px;
}
.main{
padding: 0 200px;
}
/*底部*/
.footer{
text-align: center;
}
.footer p{
margin: 0;
}
.footer a{
display: inline-block;
color: gray;
height: 60px;
width: 90px;
line-height: 60px;
margin: 0 10px;
text-decoration: none;
}
.footer a:hover{
color: white;
}
</style>
</head>
<body>
<div class="layout">
<div class="header">
<ul>
<li class="box"><a href="">首页</a></li>
<li class="box"><a href="">介绍</a></li>
<li class="box"><a href="">产品</a></li>
<li class="box"><a href="">合作</a></li>
<li class="box"><a href="">关于</a></li>
</ul>
</div>
<div class="container">
<div class="content">
<div class="main">intermediate</div>
</div>
<div class="left">left</div>
<div class="right">right</div>
</div>
<div class="footer">
<p>
<a href="">网站首页</a>|<a href="">公司介绍</a>|<a href="">产品中心</a>|<a href="">合作***</a>|<a href="">关于我们</a>
</p>
</div>
</div>
</body>
</html>运行实例 »
点击 "运行实例" 按钮查看在线实例
下面是圣杯布局代码
实例
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>圣杯布局</title>
<style>
body{
margin: 0;
}
.layout{
width: 1000px;
margin: 0 auto;
background-color: #656565;
min-width: 600px;
}
/*头部*/
.header, .footer{
height: 60px;
background-color: black;
}
.header li{
list-style: none;
}
.header ul{
margin: 0;
}
.header a{
color: white;
float: left;
margin: 0 10px;
height: 60px;
width: 80px;
line-height: 60px;
text-align: center;
text-decoration: none;
}
.header a:hover{
color: red;
font-size: 1.2rem;
}
/*圣杯布局*/
.container{
/*width: 1000px;*/
height: 600px;
padding: 0 200px;
}
.main{
background-color: #AF3434;
width:100%;
height: 600px;
}
.left{
width: 200px;
height: 600px;
background-color: #ffc09f;
}
.right{
width: 200px;
height: 600px;
background-color: green;
}
.main,.left,.right{
float: left;
}
.left{
margin-left: -100%;
position: relative;
left: -200px;
}
.right{
margin-left: -200px;
position: relative;
left: 200px;
}
/*底部*/
.footer{
text-align: center;
}
.footer p{
margin: 0;
}
.footer a{
display: inline-block;
color: gray;
height: 60px;
width: 90px;
line-height: 60px;
margin: 0 10px;
text-decoration: none;
}
.footer a:hover{
color: white;
}
</style>
</head>
<body>
<div class="layout">
<div class="header">
<ul>
<li class="box"><a href="">首页</a></li>
<li class="box"><a href="">介绍</a></li>
<li class="box"><a href="">产品</a></li>
<li class="box"><a href="">合作</a></li>
<li class="box"><a href="">关于</a></li>
</ul>
</div>
<div class="container">
<div class="main">intermediate</div>
<div class="left">left</div>
<div class="right">right</div>
</div>
<div class="footer">
<p>
<a href="">网站首页</a>|<a href="">公司介绍</a>|<a href="">产品中心</a>|<a href="">合作***</a>|<a href="">关于我们</a>
</p>
</div>
</div>
</body>
</html>运行实例 »
点击 "运行实例" 按钮查看在线实例
清除浮动在 浮动的子元素的父级元素添加清除浮动命令 overflow: hidden;
clear是在子元素使用的清除浮动命令 overflow是清除浮动带来的影响 是在父级元素设置的。