两栏布局之右边栏自适应宽度的几种方法

发表于

现如今网站层出不穷，对响应式的要求也越来越高，大多数网站都是基于两栏或者三栏布局，那么我们是如何实现左边栏固定宽度而右边栏自适应的呢？又是如何做到左右两边固定宽度，中间自适应的呢（下一篇博客解决这个问题）？

下面就让我们共同来解决这些questions。

HTML代码如下：

1
2
3
4
5
6
7
8
9
10
<!DOCTYPE html>
<html lang='en'>
<head>
	<title>两栏自适应布局</title>
</head>
<body>
	<div class="left"></div>
	<div class="right"></div>
</body>
</html>

方案一

让左边的内容脱离文档流,右边栏设置margin-left来实现视觉上的左右分栏:

1
2
3
4
5
6
7
8
9
10
11
12
   html,body{height:100%;}
.lef{
	width:300px;
	height:100%:
	background:red;
	float:left;/*脱离文档流*/
	}
.right{
	margin-left:300px;
	height:100%;
	background:green;
	}

方案二

1
2
3
4
5
6
7
8
9
10
11
12
html,body{height:100%;}
.left{
  		width:300px;
		height:80%:
		background:red;
		float:left;/*脱离文档流*/
}
   .right{                                                                                
  		height:100%;
		margin-left:300px;
		background:green;
}

上面代码会造成类似文字环绕效果，实际是float元素覆盖在了右边元素上面。
这里我们利用BFC(格式化上下文)来实现功能,这里小小科普一下BFC.

BFC:BFC(Block formatting context)直译为”块级格式化上下文”。它是一个独立的渲染区域，只有Block-level box参与， 它规定了内部的Block-level Box如何布局，并且与这个区域外部毫不相干。

会生成BFC的元素:

  • 根元素
  • float属性不为none
  • position为absolute或fixed
  • display为inline-block, table-cell, table-caption, flex, inline-flex
  • overflow不为visible

一般情况下，div和浮动元素做兄弟元素时，是覆盖的关系(呈现类似文字环绕效果).BFC特性很多，而我们这里，只关心一个，和float元素做相邻兄弟时候的表现.

规则:BFC的区域不会与float box重叠。

了解规则后,我们可以通过生成BFC来实现自适应的分栏

1
.right{overflow:hidden;}

这样我们就解决的重叠覆盖的问题，至此，两种解决两栏自适应布局的方法也介绍完了，敬请期待下一篇解决三栏布局的博客！