HTML自定义三栏,HTML+CSS三栏式布局（7种）

1.float(脱离文本流)

css部分代码：

html：

效果：

特点：左右两栏利用中间的margin挤出空间，左侧向左浮动，右侧向右浮动，中间不设置宽度，随着屏幕的缩小，左右两栏的宽度会保持不变，中间的宽度会减小。

2.且对定位absolute(脱离文档流)

css:

html:

效果：

特点：左右两栏设置为绝对定位，将脱离文档流，中间部分利用margin挤出左右两栏的空间，当窗口缩小时，左右两栏宽度不变，中间一栏的宽的减小。

3.flex布局

css：

html：

效果：

当窗口过度缩小时，左右两栏会相应的缩小

特点：兼容性较弱，但适应性较好，网页布局一般用这种方法。若不设定每一栏的高度，高度由内容撑开，若设置任意一栏的高度，则另外两栏高度也会同步改变。

4.table布局

css：

html：

效果(设置了middle高度为300px)：

效果(不设置任何高度)：

特点：与flex布局相似，高度由内容撑开，若设置了任意一栏的高度，则其余两栏的高度会随之变化。

5.Grid网格布局

css：

html：

效果：

特点：与table布局相似，高度由内容撑开，若设置了任意一栏的高度，则其余两栏的高度会随之变化。

6.圣杯式布局

css：

html：

效果：

特点：在最开始用容器包裹了：左、中、右，随后通过设置包裹容器container的padding，让中间区域左右留白，也就是说圣杯布局的左、中、右是完全独立的，他们之间是有缝隙的(如果缝隙可见的话)，例如我们接下来：给container加一个黑色背景色，并且设置高一些的高度。去左、中、右的等高布局，给middle再加一行文字。可以看出，左、中、右是独立的三个区域，都处于一个层级，都由container这个容器承接，左右两侧是靠container的padding留出来的。

7.双飞翼布局(与圣杯类似)

css：

html：

效果：

特点：双飞翼采用只处理中间解决遮盖问题，先给中间的包裹器middle加margin，让出左右空间，然后给left、right设置margin为负，把自己推上去，可以看出，左、中、右是独立的三个区域，中间区域属于最上面的层级(inner那个div)，左右两侧和middle容器一个层级。和圣杯布局相同的是中间栏都放到文档的前面，保证现行渲染。