【BFC】全面总结

一.什么是BFC

BFC（块级格式化环境）是css中的一个隐含属性，它是一个独立的渲染区域，开启BFC该元素会变成独立的布局区域，有利于开发。

二.为什么要开启BFC

具有BFC特性的元素可以看做是隔离了的独立容器，容器里面的元素不会在布局上影响到外面的元素，并且BFC具有普通容器所没有的的一些特性。通俗一点来讲，可以把BFC理解为一个封闭的大箱子，箱子内部的元素无论如何翻江倒海，都不会影响到外部。

三.如何开启BFC

1. float的值不是none。（不推荐）
2. position的值不是static或者relative。（不推荐）
3. display的值是inline-block、table-cell、flex、table-caption或者inline-flex。（不推荐）
4. overflow的值不是visible。
   常用的方式：为元素设置overflow：hidden，开启BFC。但是这种方法也是有隐患的。

四.开启BFC之后元素的特点

1.开启BFC的元素，不会被浮动元素覆盖
当box1和box2为兄弟元素时，为box1设置float：left；覆盖了box2：

box1开启了浮动之后，也相当于开启了BFC，我们可以对box2也开启BFC来消除影响
四种方法写在了box2的样式中，开启任意一种，都可以是下面这种效果，当然，也不只有这四种方法

box1{
				width: 100px;
				height: 100px;
				background-color: blue;
				float:left;
			}
			.box2{
				width: 200px;
				height: 200px;
				background-color: red;
				/* 第一种：开启浮动 */
					 float: left; 
				/* 第二种:开启定位 */
					/* position: absolute;
					left:100px; */
				/* 第三种:开启felx布局 */
					/* display:flex; */
				/* 第四种:溢出隐藏 */
					/* overflow: hidden; */
			}
	

2.开启BFC的元素，子元素和父元素的外边距不会重叠
当box1为box2的子元素时，我们为子元素box1设置100px的margin-top，效果却相当于box2设置了100px的margin-top，如下图：

这时，为box2开启BFC可以消除垂直外边距重叠问题：

	.box1{
				width: 100px;
				height: 100px;
				background-color: blue;
				margin-top: 100px;
			}
			.box2{
				width: 200px;
				height: 200px;
				background-color: red;
				/* 第一种：开启浮动 */
					 float: left; 
				/* 第二种:开启定位 */
					/* position: absolute; */
				/* 第三种:开启felx布局 */
					/* display:flex; */
				/* 第四种:溢出隐藏 */
					/* overflow: hidden; */
			}

3.开启BFC的元素可以包含浮动的子元素
还是，box1为box2的子元素时，不为box2设置高度，让其高度被子元素box1撑开，这时，我们让box1浮动：
可以看到，box2消失了，这就是我们常说的高度塌陷，还是给box2开启BFC：

	.box1{
				width: 100px;
				height: 100px;
				background-color: blue;
				float: left;
			}
			.box2{
				width: 200px;
				/* height: 200px; */
				background-color: red;
				/* 第一种：开启浮动 */
					float: left;
				/* 第二种:开启定位 */
					/* position: absolute; */
				/* 第三种:开启felx布局 */
					/* display:flex; */
				/* 第四种:溢出隐藏 */
					/* overflow: hidden; */
			}

五.总结
因为BFC内部的元素和外部的元素绝对不会互相影响，因此， 当BFC外部存在浮动时，它不应该影响BFC内部Box的布局，BFC会通过变窄，而不与浮动有重叠。同样的，当BFC内部有浮动时，为了不影响外部元素的布局，BFC计算高度时会包括浮动的高度。避免margin重叠也是这样的一个道理。
具体开发中是不会采用这些方法的，以上的这些方法只是有助于小白理解BFC的原理。
想要达到完美消除父元素高度塌陷和解决垂直外边距重叠问题，这里给个现成的：

.clearfix::before,
			.clearfix::after{
				content:"";
				display:table;
				clear:both;
			}

给元素添加clearfix类名即可。具体讲解见《 CSS权威指南 》,这本书的作者发明的这个方法。