一、浮动布局（float布局）（流动布局）（双飞翼布局）
使用浮动来完成左中右三栏布局
float:left----左浮动
float:right----右浮动
tip：使用float浮动时，margin:0 auto;使块元素居中将会失效
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
div{
/*设置最小高度，以免内容为空撑不起来div*/
min-height: 200px;
}
/*左边div的css设置*/
.left{
/*使其左浮动*/
float: left;
width: 300px;
background-color: red;
}
/*右边div的css设置*/
.right{
/*使其右浮动*/
float: right;
width: 300px;
background-color: blue;
}
.center{
background-color: green;
}
</style>
</head>
<body>
<div class="box">
<div class="left">这里是左边</div>
<div class="right">这里是右边</div>
<div class="center">这里是中间</div><!--中间的div必须写在最后，否则右边的div将会在下面-->
</div>
<div style="background-color: tan;"></div>
</body>
</html>- 优点：兼容性较好
- 缺点：浮动会给整体带来较大的影响，在宽度不够时，影响布局，而且必须先写左右div再写中间div，否则右边div将会挤到下面
双飞翼布局
- left、center、right三种都设置左浮动
- 设置center宽度为100%
- 设置负边距，left设置负边距为100%，right设置负边距为自身宽度
- 设置content的margin值为左右两个侧栏留出空间，margin值大小为left和right宽度
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>双飞翼布局</title>
<style>
.box{
height: 600px;
width: 1200px;
margin: 0 auto;
}
.left{
float: left;
width: 200px;
height: 100%;
background: red;
margin-left: -100%;
}
.center{
float: left;
width: 100%;
height: 100%;
background: blue;
}
#center_main{
margin: 0px 200px 0px 200px;
}
.right{
float: left;
width: 200px;
height: 100%;
background: red;
margin-left: -200px;
}
</style>
</head>
<body>
<div class="box">
<div class="center">
<div id="center_main">这是中间500PX</div>
</div>
<div class="left">这是左边200PX</div>
<div class="right">这是右边200PX</div>
</div>
</body>
</html>
二、定位布局（position）（圣杯布局）
1. position
position:relative：与自己原有的位置对比定位
position:absolute：与最近的一个具有position属性的父元素对比定位
position:fixed：与浏览器对比定位（需要始终在浏览器页面上的（如广告））
通常操作“子绝父相”：父元素：relative；子元素：absolute；
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
div{
min-height: 200px;
}
/*给父元素添加position:relative;*/
.box{
height: 500px;
width: 600px;
position: relative;
margin-left: 50px;
background-color: skyblue;
}
/*子元素添加absolute*/
.a{
width: 200px;
position: absolute;
left: 50%;
top:50%;
background-color: green;
}
/*fixed相对于浏览器定位*/
.b{
width: 200px;
position: fixed;
left: 50%;
top: 50%;
background-color: red;
}
</style>
</head>
<body>
<div class="box">
这是relative
<div class="a">这是absolute</div>
<div class="b">这是fixed</div>
</div>
</body>
</html>
3. 圣杯布局
- left、center、right三种都设置左浮动
- 大盒子给padding撑开自己的左右内边距，以便一会左右元素使用
- 中间主列给宽度100%
- 左元素margin-left负100%，右元素margin-left负自身宽度，为的是让左元素起点在主元素起点，右元素起点在主元素后
- 左右元素给position:relative相对定位
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>双飞翼布局</title>
<style>
.box{
height: 600px;
width: 1200px;
/*大盒子给padding撑开自己的左右内边距，以便一会左右元素使用*/
padding: 0px 200px 0px 200px;
}
.left , .center , .right{
float: left;
height: 100%;
/*三列都给float左浮动*/
}
.center{
/*中间主列给宽度100%*/
width: 100%;
background: blue;
}
.left{
/*此时的左右元素，应该被挤到下面去了，因为中间的元素写在前面，且宽度给100%*/
/*所以，先给margin-left负100%，让左元素的起点在主元素的起点处*/
/*设置相对定位，left值给自身的大小*/
margin-left: -100%;
position: relative;
width: 200px;
left: -200px;
background: red;
}
.right{
/*与左元素同理，先设置margin-left负200px,即自身的宽度，让自己的起点在主元素边框后*/
/*设置相对定位，left值给自身的大小*/
margin-left: -200px;
position: relative;
width: 200px;
background: red;
left: 200px;
}
</style>
</head>
<body>
<div class="box">
<div class="center">这是中间500PX
<div style="float: right;width: 50px;height: 50px;background: green;"></div>
</div>
<div class="left">这是左边200PX</div>
<div class="right">这是右边200PX</div>
</div>
</body>
</html>4. 总结
圣杯布局 和 双飞翼布局 是重要布局方式。两者的功能相同，都是为了实现一个两侧宽度固定，中间宽度自适应的三栏布局。
它们遵循了以下要点：
1.两侧宽度固定，中间宽度自适应
2.中间部分在DOM结构上优先，以便先行渲染
它们的区别如下：
双飞翼布局：三列元素均使用float左浮动，中间主元素写在前，将主列元素嵌套到一个新的div下，为最里面的主列元素设置左右内边距以便给左右元素留出空间（全float）
圣杯布局：三列元素嵌套在一个大的div下，且大的div使用padding设置左右内边距留出空间，左右元素使用position定位（主float+左右position）
至此，五种布局方式，还剩三种，因为2020疫情影响，这篇博客拖了一个多月，实在是很抱歉，剩下三种中，还需要重点学习的是flex和表格布局，留至下篇博文，如有不妥之处，还希望各位大佬指出批评，感谢各位
本文章为转载内容，我们尊重原作者对文章享有的著作权。如有内容错误或侵权问题，欢迎原作者联系我们进行内容更正或删除文章。
