CSS多列布局的解决方案

一、两列布局

HTML模板如下：

<div class="left"></div>
<div class="right"></div>

1. 单float + margin 组合

.left {
	width: 300px;
	height: 300px;
	float: left;
}
.right {
	height: 300px;
	margin-left: 300px; /* div.left的宽度 */
}

div.left使用float属性后已脱离文档流，而div.right仍在文档流之中，此时可对div.right增加左边距，以空缺出div.left的空间，将达到两列布局的效果。
【优点】实现简单
【缺点】①margin的值依赖div.left的长度，耦合性高；②浮动元素与未浮动元素相结合，有兼容性风险；③div.right的子元素若设置了浮动清除，显示将会错乱

---

2. 双float + margin 组合

此方法需先在div.right的外层套一个父容器，HTML模板如下：

<div class="left"></div>

<div class="right-fix">
	<div class="right"></div>
</div>

.left {
	height: 300px;
	width: 300px;
	float: left;
	position: relative;
}
.right-fix {
	width: 100%;
	float: right;
	margin-left: -300px; /* div.left的宽 */
}
.right {
	height: 300px;
	margin-left: 300px; /* div.left的宽 */
}

该策略将div.left和div.right的框架div.right-fix都设置为浮动，方向分别为左、右；
此时div.right-fix因width无法占满整行而被显示到div.left的下方，只需将div.right-fix的左边距进行相应缩减即可；
最后对div.right设置左边距，使其错开div.left，以实现两列布局。
【优点】①实现双浮动，解决了方案一中单浮动的兼容风险；②div.right的子元素可以进行浮动清除
【缺点】margin的值仍然依赖div.left的长度

---

3. float + overflow 组合

/* 此处因宽高无依赖关系，故省略未写 */
.left {
	float: left;
}
.right {
	overflow: hidden;
}

该方式通过开启overflow，隐藏了溢出部分的内容；同时，overflow会触发div.right的BFC模式（格式化上下文），使得div.right变成一个与外隔绝、完全独立的容器。
【优点】实现简单，解决了方案1中的所有问题
【缺点】开启overflow的容器中，所有溢出的元素都会被隐藏

---

4. display属性

此方法需要在div.left和div.right的外层套一个父容器，HTML模板如下：

<div class="parent">
	<div class="left"></div>
	<div class="right"></div>
</div>

.parent {
	width: 100%;
	display: table;
	table-layout: fixed; /* 列宽由表格宽度和列宽度设定 */
}
/* 此处宽高省略未写 */
.left {
	display: table-cell;
}
.right {
	display: table-cell;
}

此方法设置div.parent为table格式，并将div.left和div.right同时设置为了table-cell（单元格），能够自适应宽度，故能实现两列布局
【优点】浏览器兼容较好
【缺点】元素因为设置成了table的相关格式，将会携带table的特性

二、三列布局

HTML模板如下：

<div class="left"></div>
<div class="center"></div>
<div class="right"></div>

因三列布局的策略与两列布局一致，故不重复演示，请自行类推

1. float + margin 组合

2. float + overflow 组合

3. display属性

三、圣杯布局

HTML模板如下，注意务必将自适应元素div.center放在div.left和div.right之前，否则网页会先加载定宽元素，使得自适应元素的效果偏离预想。

<div class="head"></div>

<div class="parent">
	<div class="center"></div>
	<div class="left"></div>
	<div class="right"></div>
</div>

<div class="footer"></div>

/* div.head和div.footer省略未写 */
.parent {
	height: 300px;
	margin-left: 300px; /* 空出div.left的位置 */
	margin-right: 300px; /* 空出div.right的位置 */
}
.center {
	height: 300px;
	float: left;
	width: 100%; /* 因为设置了浮动，所以需要手动设置宽度 */
}
.left {
	height: 300px;
	width: 300px;
	float: left;
	margin-left: -100%; /* 将元素上移一行 */
	position: relative; /* 设置相对定位进行微调，同时确保元素不脱离文档流 */
	left: -300px; /* 将元素向左移动，补齐空缺 */
}
.right {
	height: 300px;
	width: 300px;
	float: left;
	margin-left: -300px; /* 将元素移动到div.parent的右端 */
	position: relative; /* 设置相对定位进行微调，同时确保元素不脱离文档流 */
	right: -300px; /* 将元素向右移动，补齐空缺 */
}

圣杯布局中间层由两个定宽 + 一个自适应元素组成。
当div.left、div.center、div.right都进行浮动后，因为自适应元素div.center先被加载，它将会占满整行，此时div.left和div.right会因没有位置而溢出到第二行，通过缩减margin-left属性我们将它俩移动到了第一行；最后通过position定位进行左右微调，成功将div.left和div.right放置到了空缺位置上。

四、双飞翼布局

双飞翼布局仅仅是对圣杯布局的一种轻微优化，其效果与圣杯布局一致。
在圣杯布局中，因为div.left和div.right设置了position定位属性，所以可能会受浏览器兼容性影响，双飞翼布局用于消除position定位属性。

【优化步骤】
①首先需要在自适应元素div.center中增加一个子元素div.inner，如下所示：

<div class="parent">
	<div class="center">
		<div class="inner"></div>
	</div>
	<div class="left"></div>
	<div class="right"></div>
</div>

②将div.parent的margin-left和margin-right属性删除，并迁移到div.inner上来

.inner {
	margin-left: 300px;
	margin-right: 300px;
}

③删除div.left和div.right的position属性以及它附带的偏移量

---

【原理解析】
双飞翼布局使div.parent占满整行，同时div.center会撑满父容器，此时div.left和div.right能够被放置到div.parent两端，但会与div.center重叠；我们在div.center中再增加一个div.inner，让其左右两边空出div.left和div.right的空间，将其视作原来的div.center即可。
【示意图】
注：图中间隔仅出于演示包含关系

五、等分布局（无间隙）

HTML模板如下：

<div class="parent">
	<div class="col1"></div>
	<div class="col2"></div>
	<div class="col3"></div>
	<div class="col4"></div>
</div>

1. 计算width的值

.col1, .col2, .col3, .col4 {
	float: left
	height: 300px;
	width: 25%; /* 100%除以4等于25% */
}

本策略通过手动计算width的百分比以实现等分布局。

---

2. display属性

.parent {
	width: 100%;
	display: table;
}
.col1, .col2, .col3, .col4 {
	height: 300px;
	display: table-cell;
}

本策略将元素视为单元格而实现自动的等分布局。

六、等分布局（有间隙）

HTML模板如下：

<div class="parent-fix">
	<div calss="parent">
		<div class="col1"></div>
		<div class="col2"></div>
		<div class="col3"></div>
		<div class="col4"></div>
	</div>
</div>

1. width + padding 组合

.parent-fix {
	overflow: hidden; /* 消除子元素溢出的问题 */
}
.parent {
	height: 300px; /* div.col的宽，用于解决高度塌陷问题 */
	margin-left: -30px; /* div.col设置的padding-left的值，用于消除多余的空隙 */
}
.col1, .col2, .col3, .col4 {
	height: 300px;
	width: 25%;
	float: left;
	box-sizing: border-box; /* 元素的边距将在已设定的宽高范围内进行绘制 */
	padding-left: 30px; /* 左边距，以空出间隙 */
}

本策略通过padding属性进行元素间的间隔操作，每一个元素都设置了padding-left属性后，最左边的元素与页面边界也会产生间隙，该间隙为多余的部分；我们通过缩减margin-left属性使得父容器div.parent向左拉伸，从而消除了多余的间隙。
此处务必给div.col设置box-sizing属性，因为默认情况下给div.col增加的边距将在25%的基础上累加，这将导致四个元素的总距离超过父容器的100%。

---

2. display + padding 组合

.parent-fix {
	overflow: hidden;
	width: 1000px; /* 外围容器的总宽度 */
}
.parent {
	height: 300px;
	width: 1030px; /* 外围容器的宽度 + 间隙宽度 */
	dispaly: table;
	margin-left: -30px;
}
.col1, .col2, .col3, .col4 {
	height: 300px;
	display: table-cell;
	box-sizing: border-box;
	padding-left: 30px;
}

本策略基本思想与方案一类似，都是通过div.col的padding-left属性产生间隙，再通过父容器的margin-left属性消除左方多余空隙。
本策略因为各div.col不是通过百分比进行宽度排布的，若div.parent不指定宽度，那么各div.col将以最小化宽度的形式进行显示；但若div.col指定为100%，margin-left会使得div.parent整体向左移动，进而导致右方出现多余空隙；故此时最好给外围容器固定宽度值，通过计算来达到布局效果。

---

3. columns属性（CSS3新增）

.parent {
	columns: 4 300px; /* 列数以及每列的宽 */
	column-gap: 30px; /* 列与列之间的间隔 */
}

columns的相关属性为CSS3新增属性，能够实现自动等分布局以及自动间隔，不会出现任何多余间隙，但该属性的浏览器兼容性不佳。

七、等高布局

HTML模板如下：

<div class="parent">
	<div class="left"></div>
	<div class="right"></div>
</div>

1. display属性

.parent {
	display: table;
}
.left {
	display: table-cell;
}
.right {
	display: table-cell;
}

表格的单元格默认是等高的，可直接利用display进行等高布局

---

2. margin + padding 组合

.parent {
	overflow: hidden;
}
.left, .right {
	padding-bottom: 9999px; /* 任意大小 */
	margin-bottom: -9999px; /* 与上面的值相反 */
}

该方法使用特殊的手段伪造了等高的效果，仅属于视觉上的经验策略，并非真正意义上的等高