bfc特性

A、什么是BFC？

	    BFC 即 Block Formatting Contexts (块级格式化上下文)，通俗一点来讲，可以把BFC看成是一个985或者211的高校。  
		BFC首先是块其次需要具备下面的条件之一才可以是BFC

B、BFC的触发条件

		1、根元素  html标签就是一个bfc
		2、float的值不为none
		3、overflow的值不为visible
		4、display的值为 inline-block/ table-cell/ table-caption/ flex/ inline-flex 
		5、position的值为absolute或fixed

C、BFC的特性

		1、Box垂直方向的距离由margin决定，属于同一个BFC的两个相邻box的margin会发生重叠
		（应用：可以解释为什么margin上下回重叠，以及解决方法的原因）
		     属于同一个BFC的两个相邻box的margin会发生重叠
	        我们默认情况下，2个相邻的box的margin会发生重叠的原因是 因为box1和box2属于html，而html是bfc，bfc里面规定了，属于同一个
	        bfc的2个相邻的box会发生重叠。
	       重叠之后，想要不重叠，可以给后面的元素添加一个父元素并且添加声明overflow：hidden；解决，原因是因为，当给box2添加了父元素
	       并且添加了overflow：hidden之后，这个父元素boxs就是BFC了，当前的结构里面box1属于BFC html  box2属于BFCboxs，这个时候box1和box2
	       就不属于同一个BFC了，那么也就不会发生重叠了	 
		2、计算BFC的高度时，浮动元素也参与计算
		 （应用：可以解释为什么高度塌陷可以用overflow：hidden等方法解决）
		   为什么添加了overflow：hidden之后可以解决高度塌陷，是因为添加了之后，就触发了ul为BFC，而BFC里面规定了，计算BFC高度的时候，
		  浮动元素也参与计算。
		3、BFC的区域不会与float box发生重叠
		（ 应用：自适应两栏布局或者三栏布局<圣杯布局和双飞翼布局>）	
		4、BFC内部的Box会在垂直方向，一个接一个的放置。
		5、每个元素的margin box的左边会与包含块border box的左边相接触（对于从左到右的格式化，否则相反），即使存在浮动也会如此。
		6、BFC就是页面上的一个独立容器，容器里面的元素不会影响到外面的元素
    
         这朵小花花送给你，希望你可以每天都开心快乐 😊