对于使用CSS样式使得盒子模型脱离文档流的讲解

html中有块级元素(display: block)和内联元素(display: inline) 或者说 display: inline-block;

在正常的文档流中，如果说一个父盒子中包含两个div的子盒子，例如：

<div class="fath">

<div class="son1"></div>

<div class="son2"></div>

 </div>

<style>

.fath {

  width: 500px;

  height: 500px;

  border: 1px solid red;

}

.son1 {

  background-color: green;

  width: 200px;

  height: 200px;

}

.son2 {

  background-color: red;

  width: 200px;

  height: 200px;

}

</style>

此时 son1和son2由于都是独占一行的元素，所以会自上而下的进行排列布局。

那此时如果我在上面那个绿色的盒子上面加上一个float: left呢？

<div class="fath">

<div class="son1"></div>

<div class="son2"></div>

 </div>

<style>

.fath {

  width: 500px;

  height: 500px;

  border: 1px solid red;

}

.son1 {

  background-color: green;

  width: 200px;

  height: 200px;

  float: left;

}

.son2 {

  background-color: red;

  width: 200px;

  height: 200px;

}

</style>

此时.son1的盒子脱离了文档流，.son2的盒子会觉得这个脱离文档流的.son1盒子其实已经不见了，所以就无视.son1盒子的存在，而自己就会往上移动到.son1的位置进行填充，你们想想，.son1盒子都没了，如果布局中只存在着.son2的盒子，那.son2盒子会处在一个什么位置上面呢？对吧，一样道理。

而此时又由于.son1的宽度和高度和.son2的宽度和高度一样，那么.son2的盒子会被.son1的盒子给覆盖掉。如果.son2的宽高比son1要多的话，就是.son1看起来位于.son2盒子的内部了，其实不是的，只是.son2已经无视了.son1盒子的存在，无视了它而已。就像下图所示：

如何解决这种被覆盖的情况呢？

1. 给黄色盒子也加一个float:left

2. 使用BFC布局 （Block Formatting Context 块级元素格式化上下文）

给黄色盒子加上一个overflow: hidden即可解决这种覆盖问题，甚至是文本环绕问题都能用overflow:hidden(BFC布局)解决。

float浮动模型引起的父类盒子塌陷也是 这个原因，子盒子脱离文档流，父盒子没有定高度，完全靠子盒子撑开，子盒子脱离文档流，父盒子没有撑开的子盒子了，所以出现了高度塌陷的情况，那么给父盒子进行overflow:hidden 进行清除浮动，就可以解决父盒子高度塌陷的问题。

position也可以使得盒子脱离文档流，不过是position: fixed和absolute可以脱离文档流，relative不会使得盒子脱离文档流。

position脱离文档流的方式，没有使得文字可以环绕的那种特性，但是float有，而且是真的有，position是真没有。

这是float的效果

这是position: absolute的效果

overflow:hidden （BFC布局）似乎没办法解决 position: absolute/fixed的，而float可以被解决，上述已经说过了。

 所以说position和float脱离文档流的形式还是有区别的，position是Layer层模型，而float是浮动模型。