三列布局：左右边固定，中间弹性自适应
| 方法 | BFC float | 流体float | 双飞翼float | 圣杯float position | 定位position | flex盒模型 |
|---|---|---|---|---|---|---|
| 实现 | float: left; float: right ;BFC(overflow：hidden) | float: left; float: right ;main中写margin-left right | float: left;*3 margin-left:-100% -100px ;main中写p，p中写margin-left right | content设置margin-left margin-right;left right 通过position relative挂到两边 | content设置relative,left right 设置absolute;main设置margin | content设置display flex;left的order设置-1，main的flex-grow设置1 |
| 结构顺序 | left right main | left right main | main left right | content{ main left right} | content{ main left right} | content{ main left right} |
| 优缺 | 主要内容无法优先加载 | 主要内容模块无法最先加载 | 主要内容模块最先加载 | 主要内容模块最先加载 | 主要内容模块最先加载 | 主要内容模块最先加载 |
注意：所有的main（中间部分）的width均没有设置
1.BFC
BFC 规则有这样的描述：BFC 区域，不会受浮动元素影响。因此我们可以利用这一点来实现三列布局，即main触发BFC来去除float元素的影响
<!DOCTYPE html>
<html lang="en">
<head>
<style>
.left {
float: left;
height: 200px;
width: 100px;
margin-right: 20px;
background-color: red;
}
.right {
width: 200px;
height: 200px;
float: right;
margin-left: 20px;
background-color: blue;
}
.main {
height: 200px;
overflow: hidden;
background-color: green;
}
</style>
</head>
<body>
<div class="container">
<div class="left"></div>
<div class="right"></div>
<div class="main"></div>
</div>
</body>
</html>
缺点：主要内容模块无法最先加载，当页面中内容较多时会影响用户体验。
2. 流体float
左右模块各自向左右浮动，并设置中间模块的 margin 值使中间模块宽度自适应。
<!DOCTYPE html>
<html lang="en">
<head>
<style>
.l
最低0.47元/天 解锁文章
4043
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
