-
双飞翼布局
三列布局，左右固定，中间自适应
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>双飞翼布局</title>
<style>
.container{
width:100%;
overflow:hidden /*利用overflow:hidden;触发BFC范式，使container形成独立容器，不受外界影响 */
}
.left{
width:150px;
height:600px;
background-color:bisque;
float:left;
}
.right{
width:200px;
background-color:darkcyan;
height:600px;
float:right;
}
/* .center写法一： */
.center{
background-color: lightgrey;
height:600px;
width:calc(100% - 200px - 150px);
margin-left:150px
}
/*🐖： .center写法二：
.center{
background-color: lightgrey;
height:600px;
width:auto;
margin-left:150px;
margin-right:200px
} */
</style>
</head>
<body>
<div class="container">
<div class="left"></div>
<div class="right"></div>
<div class="center">嘿嘿嘿嘿</div>
<!-- 🐖：注意left,right,center这三个div的顺序 -->
</div>
</body>
</html>
效果：（中间一列宽度自适应，左右两列宽度固定）
![【CSS3】设置超链接样式超链接样式[图]](data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACwAAAAAAQABAAACAkQBADs=)