BFC实现自适应两栏布局

回想第一次听到BFC的时候，是在解释为什么高度塌陷可以用overflow:hidden;等方法来解决的时候，当时BFC对我来说还是一个陌生的概念。在解决高度塌陷的问题的时候，通过BFC的触发条件之一触发BFC后，在计算BFC的高度的时候，浮动元素就可以参与计算了。

BFC(Block Formatting Contexts)即块级格式化上下文，首先得是块元素，其次具备触发条件之一的才可以是BFC。

BFC的触发条件可以是

根元素；html标签本身就是一个BFC

float的值不为none

overflow的值不为visible

display的值为inline-block/table-cell/table-caption/flex/inline-flex

position的值为absolute或fixed

得知怎么能触发BFC之后，就来到了我今天要说的触发BFC之后，利用BFC的其中一个特性可以实现自适应两栏布局。BFC的这个特性是，BFC的区域不会与浮动元素发生重叠。这个特性也可以解释为什么多个元素浮动之后会横着排。

当上面的一个元素浮动，下面的一个元素没有浮动的时候，会发生重叠，原因是浮动之后不占据位置，所以下面的元素会上去。

<style type="text/css">
	body{margin: 0;padding: 0;}
	.box1{width: 100px;height: 100px;background: red;float: left;}
	.box2{width: 200px;height: 200px;background: yellow;}
</style>
<body>
	<div class="box1">111</div>
	<div class="box2">222</div>
</body>

当给下面的元素添加了float/overflow/display的时候（参照上面的BFC触发条件），就不会重叠了。原因也就是触发了下面的元素为BFC，而BFC的特性就有BFC区域不会与浮动盒子发生重叠。

<style type="text/css">
	body{margin: 0;padding: 0;}
	.box1{width: 100px;height: 100px;background: red;float: left;}
	/* .box2{width: 200px;height: 200px;background: yellow;float: left;}
	.box2{width: 200px;height: 200px;background: yellow;overflow: hidden;} */
	.box2{width: 200px;height: 200px;background: yellow;display: inline-block;}
</style>

如果既要BFC的区域不会与浮动盒子发生重叠，又要右边的容器自适应，我们把这称为自适应两栏布局。

自适应两栏布局也通常用来实现后台管理系统。

下面用实例进行说明：

首先，我们试一下给右边元素加float，可以看见，float只能解决重叠问题，不能达到自适应的效果。

<style type="text/css">
	body{margin: 0;padding: 0;}
	.left{width: 300px;height: 300px;background: darkred;float: left;}
	/* 右边容器自适应，所以不给宽 */
	/* 首先，我们试一下给右边元素加float，可以看见，float只能解决重叠问题，不能达到自适应的效果。*/
	.right{height: 600px;background: yellow;float: left;}
</style>

<body>
	<div class="left">111</div>
	<div class="right">222</div>
</body>

其次，我们给右边的元素加overflow:hidden/auto/scroll; ,可以达到自适应的效果

<style type="text/css">
	body{margin: 0;padding: 0;}
	.left{width: 300px;height: 300px;background: darkred;float: left;}
	/* 右边容器自适应，所以不给宽 */
	/* 其次，我们给右边的元素加overflow:hidden/auto/scroll; ,可以达到自适应的效果 */
	.right{height: 600px;background: yellow;overflow: auto;}
</style>

<body>
	<div class="left">111</div>
	<div class="right">222</div>
</body>

按照上述方法，再给元素添加display:flex/inline-flex，也可以达到自适应的效果。

总结：既可以让BFC区域不会与float box重叠，又要右边的容器自适应，可以给右边元素添加（1）overflow:hidden/auto/scroll;（2）display:flex/inline-flex;

扩展：自适应两栏布局也通常用来实现后台管理系统。（核心：自适应两栏）

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>BFC实现自适应两栏布局</title>
		<style type="text/css">
			html,body{height: 100%;}
			body,ul,ol{margin: 0;padding: 0;}
			.header{height: 50px;background: #808080;}
			.header span{float: left;background: #DAA520;width: 100px;height: 30px;margin: 0 40px 0 23px;}
			.header li{list-style: none;float: left;}
			.header ul{float: left;height: 20px;background: #f00099;}
			.header ol{float: right;height: 20px;background: #9abb32;margin-right: 30px;}
			.content{height: calc(100% - 50px);background: #9ABB32;}
			.left{width: 200px;background: #000;height: 100%; float: left;}
			/* 右边自适应--overflow:auto; */
			.right{overflow: auto;height: 100%;background: yellowgreen;}
			.top{height: 60px;background: #F00099;}
			.bottom{height: calc(100% - 60px);background: #808080;overflow: hidden;}
			.tablebox{border: 2px solid #9ACD32;margin: 8px 30px 0 30px;padding: 15px;}
			.tablebox{border: 2px solid #000;margin: 8px 30px 0 30px;padding: 15px;}
			.tablebox table{width: 100%;border: 1px solid #FF0000;border-spacing: 0; border-collapse: collapse;}
			.tablebox table td{border: 1px solid #F00099;}
			/* 表格内自适应用%来表示width */
			.tablebox .col1{width: 17%;background: #9ABB32;}
			.tablebox .col2{width: 27%; background: #DAA520;}
			.tablebox .col3{width: ;}
			.tablebox .col4{width: ;}
		</style>
	</head>
</html>

以上为简易的后台管理系统两栏自适应布局（为布局清晰，大多使用色块搭建）

来源：CSDN

作者：Joanna_7471

链接：https://blog.csdn.net/Joanna_7471/article/details/104461508

标签

bfc

自适应