一、浮动布局（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和表格布局，留至下篇博文，如有不妥之处，还希望各位大佬指出批评，感谢各位