浅谈，html\css脱离标准文档流相关

　　（个人知识有限，难免有误，请见谅）

　　标准文档流，顾名思义，是要按照一定规矩排列的，默认的就是元素会从左至右，从上至下排列，块级会独占一行，行内元素会和小伙伴们共享一行。

　　本来在标准文档流下，各个元素相安无事，可突然有一天某个元素心想啊，我那么优秀，不该出现在这里啊，于是它成精了，它发现了一道大门走向另一个空间BFC。

　　BFC：直译为“块级格式化上下文”，这是一个独立的区域，这个区域与外部没有关系了，互不招惹，个人常用的会开启BFC空间的方式有

　　1.float的值不是none

　　2.position的值不为relative和static

　　3.display为inline-block

　　4.overflow不为visible

　　当然还有其他的方式会产生BFC，这里就不列举了。

　　先说说float，浮动，它会相对于自己最近的父元素进行定位，往左或者往右，这种方式会给我们布局带来便利，也可以变相的清除一些空文本给我们带来的不必要的空隙，但是使用它的时候需要注意清除它，不然由于它会脱离文档流的缘故，它的兄弟元素会跑到它原来的位置占位，或者它的父元素会因此而坍塌，这样会造成布局的混乱，就好比是在同一个位置，不同的时空，虽然浮动之后的元素还在，但是其他元素却看不见它，当然这个比喻并不怎么恰当，为了防止布局的混乱，也就是浮动之后带来的你不想要的效果，浮动之后一定要记得清除浮动，清除浮动常用的方式可以直接clear掉，当然也可以使用伪类:after来清除浮动，对于overflow:hidden,还有给浮动元素的父元素设置float来撑开父元素的高度，其原理也是开启BFC，将父元素与子元素置于同一个空间。

　　再说说position，position定位也是一种脱离普通文档流的做法，它的定位方式是相对于最近的已经定位的祖先元素，常见的方式就是子绝父相，子元素绝对定位，父元素相对定位，使用这种方式可以让子元素相对于父元素做定位，使用position:absolute的时候记得设置x,y轴的值，也就是left,top（当然也可以rigth,top，具体情况自己决定）的值，目前我不知道有什么方式可以让position为absolute与fixed的元素再从自己开辟的BFC中出来，建议只在必须的情况下使用position定位，因为position定位使用多了，大家都脱离了普通文档流，可能会给后续的布局带来困难，既然说到了position，那就顺带再提提z-index，z-index相当于布局中的z轴，在使用了position:relative 或者absolute 或者fixed的时候z-index值便会生效，简单的说如果有几个元素重叠在了一起，这时z-index后面的值谁大，谁就会显示，其实其它元素也还在，只是被z-index值最大的那个元素挡住了，注意z-index后面的值没有单位的哈。

　　最后，关于display:inline-block，我最长用的时候无非就是让霸气的块级元素能够容忍其它元素和它共享一行，或者让谦逊的行类元素拥有能够设置width,height的能力。