前端css布局之BFC

哈喽，各位小伙伴好！今天来整理下前端关于css布局的一个知识点 - BFC(Block fomatting context)，如果知识点梳理有出错的地方，望伙伴们帮忙指出，一起进步~

---

一、什么是 BFC

BFC 可以理解为建立一个布局容器，容器里按自己的方式来布局，且与容器外界的元素互不影响。

二、BFC 特性

• 1.BFC里的布局跟常规流里的一样，例如盒子会在垂直方向排列。
• 2.属于同一个BFC里的盒子会产生margin重叠。
• 3.容器内元素的margin的左边，会与容器的border左边相接触。
• 4.BFC容器不会与float元素发生重叠。
• 5.BFC内的元素不会影响到外部的元素。
• 6.BFC容器计算高度时，内部float元素也参与。

三、怎么产生 BFC

• 根元素
• float不为none的浮动元素。
• 绝对定位元素。（position: fixed; 或 position:absolute;）
• overflow值不为visible的元素。
• display:flex; 、 display:inlie-block; 、 display: table-cell; 等。

四、实例

• 1.产生一个 BFC 容器。

	<!-- 1.产生一个 BFC 容器 -->
	<style>
		.wrap {
			background-color: #ccc;
		}
		.fl	{
			float: left;
			background-color: yellow;
		}
		.fl>div {
			border:1px solid #333;
		}
	</style>
	<div class="wrap">
		<div class="fl">
			<div class="div">这是div - 1</div>
			<div class="div">这是div - 2</div>
		</div>
		产生一个 BFC 容器产生一个 BFC 容器产生一个 BFC 容器产生一个 BFC 容器产生一个 BFC 容器产生一个 BFC 容器产生一个 BFC 容器
	</div>

如图所示，这样我们就通过float 来使得 .fl 元素生成一个 BFC 容器，也可以看到：
1.容器里的div元素也是垂直排列。（对应上面介绍的特性1 - BFC里的布局跟常规流里的一样，例如盒子会在垂直方向排列）。
2.容器里的 div 元素只会撑满整个BFC容器，并不会对容器外产生影响。（对应上面介绍的特性5 - BFC内的元素不会影响到外部的元素。）

• 2.产生margin重叠

	<!-- 产生 margin 重叠 -->
	<style>
		.p1 {
			margin:10px 0;
			background-color: #ccc;
		}
		.p2 {
			margin:10px 0;
			background-color: #eee;
		}
	</style>
	<div class="p1">这是文本1111111111111111</div>
	<div class="p2">这是文本2222222222222222</div>

从图中可以看到 .p2 的margin-top和 .p1 的margin-bottom 重叠在一起了，使得他们中间的间距只有10px而不是20px。（对应上面介绍的特性2 - 属于同一个BFC里的盒子会产生margin重叠）。 因为跟元素本身也是一个BFC。 解决方法是，创建一个BFC容器：（一个元素只能受一个BFC容器影响，当元素自己也成为BFC时，就不收根元素影响了）

<!-- 解决产生 margin 重叠 -->
	<style>
		.p1 {
			margin:10px 0;
			background-color: #ccc;
		}
		.wrap {
			overflow:hidden;
		}
		.p2 {
			margin:10px 0;
			background-color: #eee;
		}
	</style>
	<div class="p1">这是文本1111111111111111</div>
	<div class="wrap">
		<div class="p2">这是文本2222222222222222</div>
	</div>

• 3.利用BFC进行左右布局

	<!-- 利用 BFC进行左右布局 -->
	<style>
		.wrap {

		}
		.fl {
			float: left;
			width: 120px;
			background-color: #eee;
			height: 300px;
		}
		.main {
			background-color: #ccc;
			height: 400px;
			overflow:hidden;
		}

	</style>
	<div class="wrap">
		<div class="fl">左边</div>
		<div class="main">主体内容主体内容主体内容主体内容主体内容主体内容</div>
	</div>

（对应上面介绍的特性4 - BFC容器不会与float元素发生重叠）

• 解决浮动元素造成父元素高度出错

当有子元素浮动时，父元素在计算高度时没有把浮动元素的高度算进去，所以看到了 .fl 元素超出了父元素。将父元素设成BFC可解决这个问题（对应上面介绍的特性6 - BFC容器计算高度时，内部float元素也参与）

	<!-- 解决浮动元素造成的父元素高度出错 -->
	<style>
		.wrap {
			background-color: #eee;
			overflow:hidden;
		}
		.fl	{
			float: left;
			background-color: #ccc;
			height: 100px;
		}
		.con {
			height: 30px;
		}
	</style>
	<div class="wrap">
		<div class="fl">高度为100px的浮动元素</div>
		<div class="con">这是文本这是文本这是文本这是文本这是文本</div>
	</div>

以上就是我整理的一些关于BFC的知识点和一些应用。