1、双飞翼布局案例
实例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>完成双飞翼布局案例</title>
<style>
/*头部样式*/
.header {
background-color: lightpink;
}
/*头部内容区*/
.header .content {
width: 1000px;
height: 60px;
background-color: black;
margin: 0 auto;
}
/*头部内容区的导航*/
.header .content .nav {
margin-top: 0;
margin-bottom: 0;
padding-left: 0;
}
/*头部导航中的列表项样式*/
.header .content .nav .item {
list-style-type: none;
}
/*头部导航中的链接样式*/
.header .content .nav .item a {
float: left;
min-width: 80px;
min-height: 60px;
/*设置行高与头部区块等高，使导航文本可以垂直居中显示*/
line-height: 60px;
color: white;
padding: 0 15px;
text-decoration: none;
text-align: center;
}
.header .content .nav .item a:hover {
/* 当鼠标移入到导航链接上时改变背景色与文本前景色*/
background-color: lightblue;
/* 将文本设置为系统根字体大小的1.2倍 */
font-size: 1.2rem;
color: red;
/*增加下划线*/
text-decoration:underline;
}
/*主体样式*/
/*第一步，主体容器设置总宽度，并水平居中*/
.container {
width: 1000px;
margin: 5px auto;
background-color: lightblue;
/*包住浮动的子元素*/
overflow: hidden;
}
/*第二步，左右区块固定宽度，中间区块自适应*/
/*1、中间区块设置宽度在它的容器wrap中*/
.wrap {
width: inherit;
min-height: 600px;
background-color: lightgreen;
}
/*2、设置左右区块的宽度和高度，并设置背景色*/
.left {
width: 200px;
min-height: 600px;
background-color: lightcoral;
}
.right {
width: 200px;
min-height: 600px;
background-color: lightpink;
}
/*3、将中间、左、右区块全部左浮动*/
.left, .right, .wrap {
float: left;
}
/*4、将左区块和右区块移动到移动到正确的位置上*/
.left {
margin-left: -100%;
}
.right {
margin-left: -200px;
}
.main {
padding-left: 200px;
padding-right: 200px;
}
/*底部样式*/
.footer {
background-color: lightgray;
}
.footer .content {
width: 1000px;
height: 60px;
background-color: #444;
margin: 0 auto;
}
.footer .content p {
text-align: center;
line-height: 60px;
}
.footer .content a {
text-decoration: none;
color: gray;
}
.footer .content a:hover {
/*加深字体颜色*/
color: white;
/*增加下划线*/
text-decoration:underline;
}
</style>
</head>
<body>
<!-- 头部 -->
<div class="header">
<div class="content">
<ul class="nav">
<li class="item"><a href="">首页</a></li>
<li class="item"><a href="">公司新闻</a></li>
<li class="item"><a href="">产品动态</a></li>
<li class="item"><a href="">联系我们</a></li>
</ul>
</div>
</div>
<!-- 中间主体 -->
<div class="container">
<div class="wrap">
<!-- 最终要展示的内容必须写在main区块中 -->
<div class="main">主体内容区</div>
</div>
<!-- 2. 左侧边栏区块 -->
<div class="left">左侧</div>
<!-- 3. 右侧边栏区块 -->
<div class="right">右侧</div>
</div>
<!-- 底部 -->
<div class="footer">
<div class="content">
<p>
<a href="">© 合肥优逸云公司版权所有</a> |
<a href="">电话：400-1618580</a> |
<a href="">地址：合肥天逸新世纪商务中心1号楼601室</a>
</p>
</div>
</div>
</body>
</html>运行实例 »
点击 "运行实例" 按钮查看在线实例
2、熟练掌握清除浮动的技巧
实例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>熟练掌握清除浮动的技巧</title>
<style>
.box1 {
width: 300px;
border: 5px dashed red;
}
.box2 {
width: inherit;
height: 300px;
background-color: lightgreen;
}
/*浮动后脱离文档流，父元素无法再包裹住；*/
.box2 {
float: left;
}
/*第一种方法：把父元素的高度设置为和子元素一样；*/
.box1 {
/*height: 300px;*/
/*这个方法不好，因为子元素高度修改的话，必须也同步修改父元素的高度；*/
}
/*第二种方法：父元素跟着子元素一起浮动*/
.box1 {
/*float: left;*/
/*如果box1上面还有父级元素，那么也要添加float，一级一级往上都要添加；*/
}
/*第三种方法：添加一个块元素，专门用来清除浮动*/
.clear {
/*clear: both;*/
/*这个方案简单粗暴,但会多增加一个dom元素, 在服务器端渲染页面时, 会遇到些麻烦*/
}
/*第四种方法：父元素添加一个伪元素，专门用来清浮动*/
.box1::after {
/*content: '';*/
/*display: table;*/
/*height: 0;*/
/*clear: both;*/
}
/*第五种方法：父元素添加'overflow'，专门清除浮动*/
.box1 {
/*overflow: auto;*/
overflow: hidden;
}
</style>
</head>
<body>
<div class="box1">
<div class="box2"></div>
<!-- <div class="clear"></div>-->
</div>
</body>
</html>运行实例 »
点击 "运行实例" 按钮查看在线实例
个人总结：
双飞翼布局是为了实现一个两侧宽度固定，中间宽度自适应的三栏布局，遵循了以下要点：
1：两侧宽度固定，中间宽度自适应
2：中间部分在DOM结构上优先，以便先行渲染
3：允许三列中的任意一列成为最高列
4：只需要使用一个额外的<div>标签
清除浮动的方法有五种，前四种方法或多或少都有些不足之处，最方便也最常用的方法是父元素添加'overflow'，专门清除浮动。