1.高度塌陷是什么？
当一个父级元素不设置固定高度时，其高度完全由子级元素撑开，如果子元素设置浮动，脱离文档流，
父元素就会失去其高度，这就是所谓的高度塌陷。
2.BFC布局规则？以及如何创建BFC?
1.内部的Box会在垂直方向，一个接一个地放置。（两个div垂直排列）
2.Box垂直方向的距离由margin决定。属于同一个BFC的两个相邻Box的margin会发生重叠。
（两个div垂直排列,上分margin-bottom:30px,下方margin-top:20px;其会发生重叠，总间距为30px）
3.每个盒子的margin box的左边，与包含块border box的左边相接触。
4.BFC的区域不会与float box重叠。(两个div,第一个float:left,这样会发生重叠，如果第二个div设置overflow:hidden就不会重叠了)
5.BFC就是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面的元素。反之也如此。(比如如果内部div的宽度大于外部div的宽度，也不会增长)
6.计算BFC的高度时，浮动元素也参与计算。(等于解决高度塌陷的方法)
如何创建BFC?
1.根元素包含BFC
2.使用float使其浮动的元素
3.overflow的值不为visible。
4.position的值为fixed和absolute
5.display为inline-block。table-cell，table-caption。flex,block
3.IFC布局规则？如何创建IFC?
1.子元素水平方向横向排列，并且垂直方向起点为元素顶部
2.子元素只会计算横向样式空间，垂直方向样式空间不会被计算.(即横向的margin,border起效，垂直的不起效果)
3.在垂直方向上，子元素会以不同形式来对齐（vertical-align）
4.能把在一行上的框都完全包含进去的一个矩形区域，被称为该行的行框。行框的宽度是由包含块和与其中的浮动来决定。
5.IFC中的“line box”一般往左边贴紧其包含块，但float元素会优先排列。
6.IFC中的“line box”高度由 CSS 行高计算规则来确定，同个IFC下的多个line box高度可能会不同
7.当内部的box的总宽度少于包含它们的行盒子时，其水平渲染规则由 text-align 属性值来决定。
8.当一个内部元素宽度超过父元素的宽度时，它会被分割成多个boxes，这些 oxes 分布在多个行盒子中。如果子元素未设置强制换行的情况下，内部盒子将不可被分割，将会溢出父元素。(比如<div style="width:200px"><span>22222222222222...222</span></div>)
在一个块状元素仅包含内联元素时
还有GFC(display:grid)和FFC(display:flex)
