三栏布局两栏布局

参考学习：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{
			 100%;
			background-color: red;
		}
		.main .mainner{
			margin :0 100px 0 200px;

		}
		.left{
			 200px;
			background-color: green;
			margin-left: -100%;
		}
		.right{
			 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{
		 100%;
		background-color: red;
	}
	.left{
		 200px;
		background-color: green;
		margin-left:-100%;
		left: -200px;
	}
	.right{
		 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{
	 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 {
     100%;
    height: 500px;
    background-color: yellow;
}
.left {
     200px;
    height: 200px;
    background-color: red;
    float: left;
}
.right {
    height: 200px;
    background-color: blue;
}

方法2：对右侧:div进行绝对定位，然后再设置right=0，即可以实现宽度自适应

.outer {
     100%;
    height: 500px;
    background-color: yellow;
    position: relative;
}
.left {
     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 {
     100%;
    height: 500px;
    background-color: yellow;
    position: relative;
}
.left {
     200px;
    height: 200px;
    background-color: red;
    position: absolute;
}
.right {
    height: 200px;
    background-color: blue;
    margin-left: 200px;
}

方法4：使用flex布局

.outer {
     100%;
    height: 500px;
    background-color: yellow;
    display: flex;
    flex-direction: row;
}
.left {
     200px;
    height: 200px;
    background-color: red;
}
.right {
    height: 200px;
    background-color: blue;
    flex: 1;
}

三栏布局 两栏布局

三栏布局两栏布局