BFC的触发条件及应用：清除浮动、解决外边距合并、盒子自适应

BFC的触发条件：

1. float值不为none；
2. position值为absolute、fixed；
3. display值为inline-block、table-cell、table-caption、flex、inline-flex；
4. overflow值不为visible。

BFC的主要用途：

1. 清除元素内部浮动：计算BFC的高度时，会检测浮动盒子的高度，撑开BFC的高度。

<!-- 清除元素内部浮动 -->
	<div class="father">
		<div class="son1"></div>
		<div class="son2"></div>
	</div>

/*清除元素内部浮动*/
	.father {
		width: 500px;
		border: 1px solid #000;
		margin: 20px auto;
		overflow: hidden; /*添加后触发BFC，使其计算盒子内浮动盒子的高度。如下图2所示*/
	}
	.son1 {
		width: 100px;
		height: 100px;
		background-color: pink;
		float: left;  /*未给father添加overflow时，两个子元素浮动后father的高度为0，上下border叠加在一起。如下图1所示*/
	}
	.son2 {
		width: 100px;
		height: 100px;
		background-color: purple;
		float: left;
	}

图1：
图2：

2. 解决外边距的合并问题：两个盒子创建不同的BFC，margin不会发生重叠。

<!-- 解决外边距的合并问题 -->
	<div class="box">
		<div class="box1"></div>
	</div>
	<div class="box2"></div>

/*解决外边距的合并问题*/
		.box {
			overflow: hidden; /*触发BFC，box1、box2的上下边距为50+100=150px*/
		}
		.box1,
		.box2 {
			width: 100px;
			height: 100px;
			margin:0 auto;
		}
		.box1 {
			background-color: pink;
			margin-bottom: 50px;
		}
		.box2 {
			background-color: purple;
			margin-top: 100px;
		}

3. 制作右侧自适应的盒子：如：图片（左侧）+文字（右侧），左侧图片浮动后，右侧文字不会环绕图片排列。即：BFC的区域不会与浮动盒子产生交集，而是紧贴浮动盒子的边缘，左侧盒子宽度变化会引起右侧盒子的宽度自适应。

<!-- 制作右侧自适应的盒子 -->
	<div class="pic">
		<div class="pic-l"></div>
		<p>1. 清除元素内部浮动：计算BFC的高度时，会检测浮动盒子的高度
			2. 解决外边距的合并问题：2个盒子创建不同的BFC，margin不会发生重叠
			3. 制作右侧自适应的盒子：图+文（右侧），不环绕排列，BFC的区域不会与浮动盒子产生交集，而是紧贴浮动边缘
		</p>
	</div>

/*制作右侧自适应的盒子*/
		.pic {
			width: 300px;
			height: 300px;
			margin: 20px auto;
			border: 1px solid #000;			
		}
		.pic-l {
			width: 100px; /*宽度变大时，右侧的BFC盒子宽度会自适应*/
			height: 100px;
			background-color: pink;
			float: left;
		}
		.pic p {
			background-color: purple;
			overflow: hidden;
		}