bfc（block formatting context）

1.bfc的定义（block formatting context）

直译为“块级格式化上下文”
目的：形成一个完全独立的空间，使空间内的元素不会受到外界元素的影响。

2.如何触发bfc

（1）float不为none
（2）position不是relative或static
（3）display的属性不能是inine-block、table-cell、flex、table-caption或inline-flex
（4）overflow不是visible

3.bfc的应用

1.解决父元素高度塌陷的问题
当一个父元素包含许多个子div，且多个元素设置了float时，父元素会识别不到子元素的存在，从而使得父元素没有高度，以致后面的元素显示收到影响，这时将父元素overflow设置为hidden时，父元素此时会根据子元素的高度自己自己产生相同的高度。

#one{
			width:400px;
			background-color: pink;
			overflow: hidden;
		}
.two{
			width:100px;
			height:100px;
			float:left;
			background-color: blue;
		}
<div id="one">
    	<div class="two">2</div>
    	<div class="two">3</div>
    	<div class="two">4</div>
</div>

2.自适应两栏布局

#left{
		width:100px;
		height:100px;
		text-align: center;
		float: left;
		background-color: pink;
	}
#right{
		width:500px;
		height:500px;
		text-align: center;
		background-color: lightblue;
		overflow: hidden;
//没有overflow的话，蓝色会识别不到粉色的存在,会与粉色重叠一部分
	}

<div id="left">111</div>
<div id="right">222</div>

3.清除浮动
当不给父元素设置高度、子元素设置了浮动时，父元素会发生高度塌陷，这时需要清除浮动。

#big{
		width:200px;
		background-color: grey;
		border: 30px green solid;
		overflow: hidden;//如果没有就是第一张图的效果
	}
#left{
		width:100px;
		height:100px;
		text-align: center;
		float: left;
		background-color: pink;
	}
#right{
		width:100px;
		height:100px;
		text-align: center;
		float: left;
		background-color: lightblue;
	}
<div id="big">
   	 	<div id="left">111</div>
		<div id="right">222</div>
</div>