一、什么时候会形成BFC区域？
首先介绍下什么是overflow overflow属性规定当内容溢出元素框时发生的事情。 当给一个父盒子设置宽高之后，盒子里得内容如果太多，就会溢出来，然后overflow有五个值专门来处理这些溢出来得内容
overflow有五个值：
值描述visible默认值，内容不会被修剪，会呈现再元素框之外hidden内容会被修剪，并且其余内容是不可见的scroll内容会被修剪，但是浏览器会显示滚动条以便查看其余内容auto如果内容被修剪，则浏览器会显示滚动条以便查看其余内容inherit规定应该从父元素继承 overflow 属性的值逐渐演变成了清除浮动的方法： 除了overflow:visible 其他的都可以清楚浮动，其实就是形成了BFC区域
什么时候会形成BFC 1、根元素 2、float属性不为none（就是左浮动、右浮动） 3、position为absolute或fixed 4、display为inline-block 5、overflow不为visible
BFC的布局规则 1、内部的box会在垂直方向，一个接一个的放置。
2、box垂直方向的距离有margin决定，属于同一个BFC区域的两个相邻的box的margin会发生重叠。也就是margin塌陷问题
3、每个元素的margin box的左边，与包含块border box的左边相接触（对于从左往右的格式化，否则相反）。即使存在浮动也是如此，此时两个盒子的左边都会紧靠父盒子的左边就会发生一个盒子压在另一个盒子的上面。
4、BFC的区域不会与ffloat元素重叠。第三条出现了重叠的现象，那么此时如果不想让他们发生重叠的现象，就给第二个盒子设置生成BFC区域。
5、BFC就是页面上的一个隔离的独立容器，容器里面的子元素不会影响外面的元素，反之也如此。
6、计算BFC高度时，浮动元素也参与计算。如果父盒子没有形成BFC，子元素浮动，那么子元素就不会撑起来父盒子的高度，那么此时给父盒子生成BFC区域，父盒子的高度就会被撑起来。
