BFC和常规流的关系是什么:常规流遵循BFC,IFC规则.
定位规则总体来说三种: 常规流,浮动,绝对定位(CSS3里面新加了一种flex)
其中常规流包括BFC,IFC等规则,块级元素一个一排地从上向下堆放，行内元素从左往右地堆放，这就是一个标准的流程.
(inline-block也属于常规流,暂且把它当作inline)
而浮动和绝对定位是脱离了常规流,改从左往右排，打破次元，从二维表面升起来了，跑到原来位置的上空了。
(其实是别的元素在按照标准流布局时会忽略脱离标准流的元素,说浮起来并不准确,但是容易理解)
至于为什么有inline-block的特性应该是因为不遵循常规流了,或者说就是做了inline-block设置了?(不明白)
浮动可以理解为让某个div元素脱离文档流，漂浮在标准流之上，和标准流不是一个层次。
假如某个div元素A是浮动的，如果A元素上一个元素也是浮动的，那么A元素会跟随在上一个元素的后边
(如果一行放不下这两个元素，那么A元素会被挤到下一行)；如果A元素上一个元素是标准流中的元素，
那么A的相对垂直位置不会改变，也就是说A的顶部总是和上一个元素的底部对齐。
利用浮动的这个特性可以做一些响应式的布局,虽然它当时的作用仅仅只是文字环绕图片....
绝对定位:和浮动比起来...蒙多想去哪就去哪= =(浮动只能left或者right)
值得一提的是浮动和绝对定位会让自身触发BFC的特性(可以理解为在自身新建了一个魔法盒),
即自身包裹的元素不会受到外界的干扰,也不会干扰外界的元素.
具体可以看下下面的BFC布局规则.原本整个页面只有html有这个魔法盒,里面的元素都在这一个盒子里面,相互影响,
相互干扰,即使是嵌套元素也不例外(所以才有了margin-top合并,塌陷),所以可以利用这个特性清除浮动.
(关于清除浮动以后再谈,清除浮动可以在父元素结尾加元素或伪元素并且让他们clear:both,
也可以让父元素触发BFC特性:计算BFC的高度时，浮动元素也参与计算)
BFC布局规则
1.内部的Box会在垂直方向，一个接一个地放置。
2.Box垂直方向的距离由margin决定。属于同一个BFC的两个相邻Box的margin会发生重叠
3.每个元素的margin box的左边， 与包含块border box的左边相接触(对于从左往右的格式化，否则相反)。
即使存在浮动也是如此。
4.BFC的区域不会与float box重叠。
5.BFC就是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面的元素。反之也如此。
6.计算BFC的高度时，浮动元素也参与计算
只要元素满足下面任一条件即可触发 BFC 特性：
1.<html> 根元素
2.浮动元素：float 除 none 以外的值
3.绝对定位元素：position (absolute、fixed)
4.display 为 inline-block、table-cells、flex
5.overflow 除了 visible 以外的值 (hidden、auto、scroll)
https://blog.csdn.net/jiaojsun/article/details/76408215
固定定位：position:fixed;
固定定位，就是相对浏览器窗口定位。页面如何滚动，这个盒子显示的位置不变。
固定定位IE6不兼容。
4、关于z-index
z-index值表示谁压着谁。数值大的压盖住数值小的。
只有定位了的元素，才能有z-index值。
也就是说，不管相对定位、绝对定位、固定定位，都可以使用z-index值。而浮动的东西不能用。
z-index值没有单位，就是一个正整数。默认的z-index值是0。
如果都没有z-index值，或者z-index值一样，那么谁写在HTML后面，谁在上面能压住别的元素。
定位了的元素，永远能够压住没有定位的元素。