BFC用途--解决外边距塌陷和宽度自适应问题

1.BFC(块级格式化上下文)，既不是css属性，也不是一段代码。
2.BFC五条规则：
a.BFC有隔离作用，内部元素不会受到外部元素的影响。
b.一个元素只能存在于一个BFC中，如果同时存在两个BFC中，违背隔离规则。
c.BFC中元素按照正常流排序，元素之间空隙由margin控制。
d.BFC中的内容不会与外部浮动元素重叠（隔离效果）。
f.在计算其高度的时候，需要包括其中的浮动子元素的高度。
3.创建BFC
满足其中一条即可。
a.根元素，即html元素；
b.float属性-不为none的浮动元素；
c.position属性-absolute和fixed定位元素；
d.overflow属性-不为visible的块级元素；
e.display属性-inline-block、table-cell（相当于th【th加粗居中】和td）、table-caption（相当于caption）或伸缩盒（flex和inline-flex）元素。
4.用途
1.清除浮动
a。当一个元素被定义为浮动，附近的文字即使不相邻也会围绕着他。

ul{
		border:1px solid green;
		list-style:none;
		width:100px;
		height:100px;
		}

html
<ul style="overflow:hidden;">
	<li style="float:left"></li>
</ul>
<hr/>

结果分析：通过给li的父级元素添加BFC，即给ul添加overflow：hidden，起到隔离作用，防止了文字环绕。

b。浮动元素会脱离文档流，如果附近有其他元素，且正常文档流中会使其重叠。给div创建BFC就能避免重叠

<span style = "float:left">浮动文案</span>
<div></div>

2.解决外边距塌陷问题

<div class= "div3"></div>
<div class= "div4" style="margin-top:10px;">
<p  class="p1" style="margin-top:10px;"></p>
</div>
<hr/>
css
.div3{
				width:100px;
				height:100px;
				border:1px dashed red;
				}
				.div4{
				overflow:hidden;
					}
				.p1{
				
				width:100px;
				height:100px;
				border:1px dashed black;
					}

未设置：.div4{overflow:hidden;}

上述代码效果图，可与上图对比

3.宽度自适应的两栏布局问题

<div class = "div5" style="float:left;width:100px;height:100px;"></div>
<div class = "div6" style="overflow:hidden;height:100px;"></div>
css为了更好看到效果
.div5{
			border:1px solid #C0F;
		}
.div6{
		border:1px solid #660;
		}

如果不设置BFC结果div6将会占满整行，且左边区域会被div覆盖不能正常显示。