三栏布局 两栏布局
参考学习：https://www.cnblogs.com/imwtr/p/4441741.html
https://www.cnblogs.com/woodk/p/5147085.html
https://blog.csdn.net/wangchengiii/article/details/77926868
双飞翼布局：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
.header{
height: 20px;
background-color: blue;
}
.main,.left,.right{
float: left;
height: 200px;
}
.main{
width: 100%;
background-color: red;
}
.main .mainner{
margin :0 100px 0 200px;
}
.left{
width: 200px;
background-color: green;
margin-left: -100%;
}
.right{
width: 100px;
background-color: yellow;
margin-left: -100px;
}
.null{
clear: both;
}
.footer{
height: 20px;
background-color: blue;
}
</style>
</head>
<body>
<div class="header"></div>
<div class="main">
<div class="mainner">1</div>
</div>
<div class="left">1</div>
<div class="right">1</div>
<div class="null"></div>
<div class="footer"></div>
</body>
<script>
</script>
</html>
圣杯布局：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
.header{
height: 20px;
background-color: blue;
}
.middle,.left,.right{
float: left;
position: relative;
height: 200px;
}
.main{
padding:0 100px 0 200px;
overflow: hidden;
}
.middle{
width: 100%;
background-color: red;
}
.left{
width: 200px;
background-color: green;
margin-left:-100%;
left: -200px;
}
.right{
width: 100px;
background-color: yellow;
margin-left: -100px;
right: -100px;
}
.footer{
height: 20px;
background-color: blue;
}
</style>
</head>
<body>
<div class="header"></div>
<div class="main">
<div class="middle">1</div>
<div class="left">1</div>
<div class="right">1</div>
</div>
<div class="footer"></div>
</body>
</html>
双飞翼布局比圣杯布局多创建了一个div，但不用相对布局了。
两栏布局
1.要点：将侧边区块域浮动，浮动后覆盖红色, 再将 overflow:auto，形成BFC，形成独立区域，达到效果。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
<style>
.header{
height: 50px;
background-color: green;
}
.main .left{
width: 100px;
height: 200px;
background-color: yellow;
float:left;
}
.main .right{
height: 200px;
background-color: red;
overflow: hidden;
}
.footer{
height: 50px;
background-color: green;
}
</style>
</head>
<body>
<div class="header"></div>
<div class="main">
<div class="left"></div>
<div class="right"></div>
</div>
<div class="footer"></div>
</body>
</html>
html结构
<div class="outer">
<div class="left">固定宽度</div>
<div class="right">自适应宽度</div>
</div>
方法1：左侧div设置成浮动：float: left，右侧div宽度会自拉升适应
.outer {
width: 100%;
height: 500px;
background-color: yellow;
}
.left {
width: 200px;
height: 200px;
background-color: red;
float: left;
}
.right {
height: 200px;
background-color: blue;
}
方法2：对右侧:div进行绝对定位，然后再设置right=0，即可以实现宽度自适应
.outer {
width: 100%;
height: 500px;
background-color: yellow;
position: relative;
}
.left {
width: 200px;
height: 200px;
background-color: red;
}
.right {
height: 200px;
background-color: blue;
position: absolute;
left: 200px;
top:0;
right: 0;
}
方法3：将左侧div进行绝对定位，然后右侧div设置margin-left: 200px
.outer {
width: 100%;
height: 500px;
background-color: yellow;
position: relative;
}
.left {
width: 200px;
height: 200px;
background-color: red;
position: absolute;
}
.right {
height: 200px;
background-color: blue;
margin-left: 200px;
}
方法4：使用flex布局
.outer {
width: 100%;
height: 500px;
background-color: yellow;
display: flex;
flex-direction: row;
}
.left {
width: 200px;
height: 200px;
background-color: red;
}
.right {
height: 200px;
background-color: blue;
flex: 1;
}
