BFC块级格式化上下文

BFC的目的

---

形成一个完全独立的空间，让空间中的子元素不会影响到外面的布局

触发BFC的方式

• float 除了none以外的值

• overflow 除了visible 以外的值（hidden，auto，scroll ）

• display (table-cell，table-caption，inline-block, flex, inline-flex)

• position值为（absolute，fixed）

• fieldset元素-表单周围的边框说明

BFC到底能干啥

子元素浮动，父元素高度塌陷

---

			.father,
			.monther {
				width: 600px;
				background-color: #005AA0;
			}
			.son {
				width: 100px;
				height: 100px;
				background-color: #008000;
				float: left;
			}
			.monther {
				height: 200px;
			}

		<div class="father">
			<div class="son"></div>
			<div class="son"></div>
			<div class="son"></div>
			<div class="son"></div>
		</div>
		<div class="monther"></div>

会导致父亲高度为0

解决办法：触发BFC

1. 父亲添加高度-只适用于父亲高度确定时

.father {
	height:200px
}

2. 让父亲也浮动-依然会影响到后边的布局

.father {
	float:left
}

3. 绝对定位/固定定位【脱离标准流】-依然会影响到后边的布局

.father {
	position: absolute;
}

4. table-cell/inline-block等

.father {
	display: table-cell/inline-block等;
}

两栏自适应布局-一栏固定，一栏自适应[触发BFC]

---

解决办法：

自适应的一侧触发BFC即可

垂直方向margin重合

---

			.friend{
				width: 100px;
				height: 100px;
				background-color: red;
			}
			.friend:first-child{
				margin-bottom: 20px;
			}
			.friend:last-child{
				margin-top: 20px;
			}

<div class="friend"></div>
<div class="friend"></div>

解决办法：

给第二个div包裹一个父亲，父亲触发BFC即可