前端布局详解之三栏布局

三栏布局，高度及左右容器宽度固定，中间自适应

方法一：绝对定位

	<!-- absolute -->
    <style>
        * {
			margin: 0;
			padding: 0;
		}
	    .layout article div {
			min-height: 100px;
		}
		.layout.absolute .left-right-center>div {
			position: absolute;
		}
		.layout.absolute .left {
			left: 0;
			width: 300px;
			background-color: red;
		}
		.layout.absolute .center {
			left: 300px;
			right: 300px;
			background-color: yellow;
		}
		.layout.absolute .right {
			right: 0;
			width: 300px;
			background-color: green;
		}
	</style>
	<section class="layout absolute">
		<article class="left-right-center">
			<div class="left"></div>
			<div class="center">
				<h1>绝对定位解决方案</h1>
				1.这是三栏布局中间部分
				2.这是三栏布局中间部分
			</div>
			<div class="right"></div>
		</article>
	</section>

兼容性：IE6以上
优点: 快捷
缺点：布局脱离文档流，导致下面子元素也要脱离文档流，可使用性差；屏幕缩小到一定距离会有问题
高度问题：当中间内容高度增加，中间元素会自动增加高度，两侧元素保持不变

---

方法二：浮动

	<style>
	    * {
			margin: 0;
			padding: 0;
		}
	    .layout article div {
			min-height: 100px;
		}
		.layout.float .left {
			width: 300px;
			float: left;
			background-color: red;
		}
		.layout.float .right {
			width: 300px;
			float: right;
			background-color: green;
		}
		.layout.float .center {
            background-color: yellow;
		}
	</style>
    <section class="layout float">
		<article class="left-right-center">
			<div class="left"></div>
			<div class="right"></div>
			<div class="center">
				<h1>浮动解决方案</h1>
				1.这是三栏布局中间部分
				2.这是三栏布局中间部分
			</div>
		</article>
    </section>

兼容性：IE6以上
优点: 兼容性好
缺点：要闭合浮动，解决浮动对旁边元素的影响，屏幕缩小到一定距离会有问题
高度问题：当中间内容高度增加，左边的div挡不住了，文字会出现环绕效果
解决办法：创建BFC(块级、格式化、上下文)
只要触发了BFC就可以闭合浮动，预防高度塌陷
如何触发BFC：
1. float除了none
2. overflow除了visible
3. display: table-cell/table-caption/inline-block
4. position: fixed/absolute
延伸：

• 浮动存在的问题及解决方法：
  1. 父元素高度塌陷
      给父元素加固定高度（缺点，高度只能固定）
      给子元素最后加个空div,设置clear:bot（缺点，增加无意义标签）
      让父元素也浮动（缺点，影响整体布局）
      给父元素加overflow: hidden;（缺点，当子元素内容过多会直接被隐藏）
      使用伪元素 ：after

  第一种写法：
  .clearfix:after {
  	content: ".";
  	display: block;
  	height: 0;
  	clear: both;
  	visbility: hidden;
  }
  .clearfix {
  	zoom: 1;//为兼容IE6/7
  }
  改进：
  .clearfix:after,
  .claerfix:before {//防止margin塌陷
  	content: " ";
  	display: table;
  }
  .clearfix:after {
  	clear: both;
  }
  

  2.浮动元素脱离标准流，后面的普通元素将无视浮动元素
   直接给被遮盖的元素加clear: both;

---

方法三：inline-block+calc

<style>
    * {
		margin: 0;
		padding: 0;
	}
    .layout article div {
		min-height: 100px;
	}
	.layout.inline-block {
		margin-top: 120px;

	}
	.layout.inline-block .left-right-center>div {
		display: inline-block;
	}
	.layout.inline-block .left {
		width: 300px;
		background-color: red;
	}
	.layout.inline-block .center {
		width: calc(100% - 600px);
		background-color: yellow;
		margin-left: -5px;
		vertical-align: top;
		/*overflow: hidden; */
		/*https://www.cnblogs.com/guxingzhe/p/5391292.html*/
	}
	.layout.inline-block .right {
		width: 300px;
		background-color: green;
		margin-left: -4.5px;
	}
</style>
   <section class="layout inline-block">
	<article class="left-right-center">
		<div class="left"></div>
		<div class="center">
			<h1>行内块+calc解决方案</h1>
			1.这是三栏布局中间部分
			2.这是三栏布局中间部分
		</div>
		<div class="right"></div>
	</article>
</section>

兼容性：兼容IE8以上
优点: 不脱离标准流
缺点：存在很多小问题；缩小到一定程度会出现问题

1. inline-block元素直接存在的间隙问题，而且不同浏览器间隙距离不同。
2. 同一div内，行内块元素不对齐，与文字的基线对齐。因为inline-block的基线是普通流中最后一个line box的基线，解决办法：加vertical-align

高度问题：当中间内容高度增加，中间元素会自动增加高度，两侧元素保持不变

---

方法四： table

	<style>
	    * {
			margin: 0;
			padding: 0;
		}
	    .layout article div {
			min-height: 100px;
		}
		.layout.table .left-right-center {
			width: 100%;
			display: table;
		}
		.layout.table .left-right-center>div {
			display: table-cell;
			height: 100px; /*不识别min-height*/
		}
		.layout.table .left {
			width: 300px;
			background-color: red;
		}
		.layout.table .center {
			background-color: yellow;
		}
		.layout.table .right {
			width: 300px;
			background-color: green;
		}
	</style>
	<section class="layout table">
		<article class="left-right-center">
			<div class="left"></div>
			<div class="center">
				<h1>table解决方案</h1>
				1.这是三栏布局中间部分
				2.这是三栏布局中间部分
			</div>
			<div class="right"></div>
		</article>
	</section>

兼容性：兼容IE7以上
优点: 兼容性好，能解决很多问题
缺点：操作繁琐，高度不能随意调整
高度问题：中间盒子高度被内容撑开，两侧盒子高度与其保持一致

---

方法五：flex

	<style>
	    * {
			margin: 0;
			padding: 0;
		}
	    .layout article div {
			min-height: 100px;
		}
		.layout.flexbox .left-right-center {
			display: flex;
			display: -wibkit-flex;
		}
		.layout.flexbox .left {
			width: 300px;
			background-color: red;
		}
		.layout.flexbox .center {
			flex-grow: 1;
			background-color: yellow;
		}
		.layout.flexbox .right {
			width: 300px;
			background-color: green;
		}
	</style>
    <section class="layout flexbox">
		<article class="left-right-center">
			<div class="left"></div>
			<div class="center">
				<h1>flexbox解决方案</h1>
				1.这是三栏布局中间部分
				2.这是三栏布局中间部分
			</div>
			<div class="right"></div>
		</article>
	</section>

兼容性：IE9以上
优点: 解决了position和flat存在的问题
缺点：要考虑兼容性问题
高度问题：中间盒子高度被内容撑开，两侧盒子高度与其保持一致

---

方法六：grid

	<style>
	    * {
			margin: 0;
			padding: 0;
		}
	    .layout article div {
			min-height: 100px;
		}
	    .layout.grid .left-right-center {
	    	display: grid;
	    	grid-template-columns: 300px 1fr 300px;
	    }
	    .layout.grid .left {
	    	background-color: red;
	    }
	    .layout.grid .center {
	    	background-color: yellow;
	    }
	    .layout.grid .right {
	    	background: green;
	    }
	</style>
   <section class="layout grid">
		<article class="left-right-center">
			<div class="left"></div>
			<div class="center">
				<h1>grid解决方案</h1>
				1.这是三栏布局中间部分
				2.这是三栏布局中间部分
			</div>
			<div class="right"></div>
		</article>
	</section>

兼容性：不兼容IE
优点: 可以做很多复杂的布局
缺点：兼容性不好
高度问题：中间盒子高度被内容撑开，两侧盒子高度与其保持一致