由于最近做的一个练习，用到了三栏布局，但是对其中的原理早就忘了，于是重新整理一番。

三栏布局

三栏布局属于一种很常见的布局方式，字面上理解即分成三栏。由于各种原因，浏览器的大小并不完全相同，若将每一块设置成定宽，则不能兼顾各种尺寸。三栏布局即左右定宽，中间自适应，能适应很多需求。

1、左右浮动

左右浮动的代码核心即采用float浮动方法，将左右两栏脱离文档流，而中间设置左右margin外边距，这样margin既能直接依照浏览器边缘做基准。HTML代码如下：

1
2
3
<div class="left">left</div>
<div class="right">right</div>
<div class="middle">middle</div>

CSS代码如下：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
.left{
  float: left; 
  background-color: blue; 
  width: 100px; 
  height: 100px;
}

.middle{
  margin: 0 120px;
  background-color: yellow; 
  height: 300px;
}

.right{
  float: right;
  background-color: blue; 
  width: 100px; 
  height: 100px;
}
  • 需要注意的是注意HTML中左右栏与中间栏的位置，一定要将middle栏放在最后，因为浮动会脱离文档流。
  • 该方法足够简洁，但是浮动的使用也添加了一些隐患。而且根据浏览器加载的规律，左右两栏会先于中间栏加载，倘若左右两栏加载过慢，影响用户体验。

2、圣杯布局

圣杯布局主要采用margin负值来形成三栏布局，HTML代码如下:

1
2
3
4
5
<div class="container">
  <div class="middle">middle</div>
  <div class="left">left</div>
  <div class="right">right</div>
</div>

css代码如下：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
.container{
  padding-left: 100px;
  padding-right: 200px;
}

.left{
  float: left;
  width: 100px;
  height: 200px;
  background-color: #000AFF;
  margin-left: -100%;
  position: relative;
  left: -100px;
}

.middle{
  float: left;
  width: 100%;
  height: 200px;
  background-color: #D3FF00;
}

.right{
  float: left;
  width: 200px;
  height: 200px;
  background-color: #FF0000;
  margin-left: -200px;
  position: relative;
  right: -200px;
}
  • 圣杯布局的父元素container中的padding主要形成左右栏的框架。
  • 若无position则会由于padding的控制而使左右空白，此时需要position:relative来调整左右栏位置。
  • 若想将左右栏与中间栏有空位置，可将container中padding属性以及position的属性来调整。
  • 此处跳转其他博客关于圣杯布局详解

3、双飞翼布局

双飞翼布局是圣杯布局的改进，标签的使用更简洁，HTML代码如下:

1
2
3
4
5
<div class="middle_body">
  <div class="middle">middle</div>
</div>
<div class="left">left</div>
<div class="right">right</div>

css代码如下：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
.middle{
  float: left;
  width: 100%;
  height: 200px;
  background-color: #F7FF00;
}

.inner{
  margin-left: 100px;
  margin-right: 200px;
}

.left{
  float: left;
  width: 100px;
  height: 200px;
  background-color: #0015FF; 
  margin-left: -100%;
}

.right{
  float: left;
  width: 200px;
  height: 200px;
  background-color: #FF0000;
  margin-left: -200px;
}

双飞翼布局在处理三栏位置的时候与圣杯布局相同，都是采用margin负值。但是在中间内容遮挡的处理上不同。

  • 圣杯布局采用position相对定位以及整个的padding来使左右两栏移动。
  • 而双飞翼布局采用在中间元素中插入子元素，子元素包含了中间栏的内容，而在中间栏使用margin将两侧撑开。
  • 若想将三栏之间留有间隙，则可将middle中的color移至inner中，再改动margin即可。

小结

三栏布局时间已经很长了，但是其中的原理还是很值得研究的。除去三栏布局，我目前所熟知的布局还有bootstrap的栅格化布局（响应式布局），还有Flex布局。几种布局方式各有优劣，如何恰当的选取暂时理解不深，随着我不断的完成项目，应该能有更深的理解，期待我技术的不断进步。

—————————– 2019.4.8 更新 ——————————–

两栏布局

1. float-margin

float本身BFC，但是具有破坏性。而且虽然能不定宽（这里发现好多网上的都是错的，margin-left设置百分比是按照父元素来定的，也就是说可以不定宽，但是也有一点小问题，就是中间的间隙也是百分比，这个体验不是太好）

2. BFC

方案优势：可以充分利用流体特性，左侧无论多宽，右侧BFC后，不会受其影响

而且可以整站替换，比如声明两个class，一个overflow：hidden，一个float：left。就可以整站使用

而float-margin需要知道左侧宽度而确定margin大小，没办法组件化。
当然容器外面的元素有可能被隐藏，也算是一点小小的缺点吧

3. table-cell

虽然是比较古老的布局吧，最开始也觉得这种布局很烂啊，什么的。但是后面也有了一点感触吧，真的是不同的布局有不同的优势，table布局简单，而且内部宽度设置的再大也不会超过表格容器宽度，也可以做一个自适应的block。而且最主要的是，天然支持等高布局

等高布局

1. border模拟

缺点，左侧定宽

优点：兼容性好

2. margin和padding组合

margin-bottom：-9999px， padding-bottom：9999px，外部overflow：hidden隐藏

不足之处：子元素定位到外面会因为overflow：hidden产生一定问题