页面两栏布局

分为以下几种情况

• 一栏固定宽度，一栏自适应
• 一栏不定宽，一栏自适应
• 两栏等高
• 左右宽度比为1：2，右边又分为上下结构，高度比为1：1

一栏固定宽度，一栏自适应

法一：左侧float:left;右侧margin-left;

html

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

css

	body,div{padding: 0 ;margin:0;}
	.left,.right{height: 200px;}
	.left{float: left;width: 200px;background-color:skyblue;}
	.right{margin-left: 200px; background-color: greenyellow;}

//因为块级元素有流体特性，即默认会填充满外部容器，所以只需要设置margin，不需要设置width就可以让content填满剩余的部分。

法二：左侧float:left; 右侧overflow:hidden；

html

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

css

	body,div{padding: 0 ;margin:0;}
	.left,.right{height: 200px;}
	.left{float: left;width: 200px;background-color:skyblue;}
	.right{overflow:hidden; background-color: greenyellow;}

右侧设置的overflow:hidden会触发块级格式化上下文（BFC）。
具有BFC特性的元素可以看作是隔离了的独立容器，容器里面的元素不会在布局上影响外面的元素，并且BFC具有普通元素没有特性：如下边距不发生折叠；可以清除浮动；可以阻止元素被覆盖。
正因为有了这些特性，所以右边可以用触发BFC的元素来清除左边浮动的影响。

触发了BFC的元素仍然保持流体特性，也就是说BFC元素虽然不与浮动交集，自动退避浮动元素宽度的距离，但本身作为普通元素的流体特性依然存在，反映在布局上就是自动填满除去浮动内容以外的剩余空间。

触发BFC的方法：

• body根元素
• 浮动元素（除了float:none）
• 定位的元素（absolute、fixed）
• display ( inline-block、table-cells、flex )
• overflow ( hidden、auto、scroll )

注意 ：如果是右边宽度固定，左边宽度自适应，那么html结构应该调整为.right的div写在.left的div上方，如果right写在下方，.left元素不会脱离标准文档流，那么.right会自成一行，达不到想要的效果。

法三：利用绝对定位

html

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

css

.wrap{position : relative; }
.left{ width: 200px; }
.right{ position: absolute; top: 0; left: 200px; right: 0}

//通过设置right:0；来限制右边块级元素的宽度

法四：利用弹性布局

html

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

css

    body,div{padding: 0 ;margin:0;}
	.wrap{display: flex;}
	.left,.right{height: 200px;}
	.left{width: 200px;background-color:skyblue;}
	.right{flex: 1; background-color: greenyellow;}

但好像实际的应用中，并不喜欢弹性布局

一栏不定宽，一栏自适应

左侧的宽度就会随着里面内容的大小而缩放。

法一：左侧float:left; 右侧overflow:hidden；

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

	body,div{padding: 0 ;margin:0;}
	.left,.right{height: 200px;padding: 10px;}
	.left{float: left;background-color:skyblue;}
	.right{overflow:hidden;background-color: yellow;}

法二：利用弹性布局

    <div class="wrap">
		<div class="left">我是left</div>
		<div class="right">我是right</div>
	</div>

        body,div{padding: 0 ;margin:0;}
		.wrap{display:flex;}
		.left,.right{height: 200px;padding: 10px;}
		.left{background-color:skyblue;}
		.right{flex:1;background-color: yellow;}

两栏等高

上述方法，都是设置.left和.right的高度相同，但是如果不设置高度，并且两栏里面的内容高度不一样，就会出现上图两栏不等高的情况。如何解决上述问题，有如下几种方法：

法一：设置两栏高度相等

//这个方法适应性不高

法二：利用margin

    <div class="wrap">
		<div class="left">我是left</div>
		<div class="right">我是right</div>
	</div>

.left{height: 100px;}
.right{margin-bottom:-9999px; padding-bottom: 9999px;}

注意：这个方法有一个缺陷，就是right设置之后，会出现一个滚动条，因此只能给父元素设置高度，再overflow:hidden;来实现两栏等高。

法三：利用flex

    <div class="wrap">
		<div class="left">我是left</div>
		<div class="right">我是right</div>
	</div>

		.wrap{display:flex;}
		.left{background-color:skyblue;}
		.right{background-color: yellow;}

或者可以给一栏设置高度，另一栏也可以实现自适应。

左右宽度比为1：2，右边又分为上下结构，高度比为1：1

###法一：利用flex

<div class="wrap">	
	<div class='left'>left</div>
	<div class='right'>
		<div class="rigTop">
			rigTop
		</div>
		<div class="rigBot">
			rigBot
		</div>
	</div>
</div>

.wrap{display: flex;}
.left{width： 33.3%;} 
.right{flex: 1;}
.rigTop, .rigBot{height: 50%;}