布局和文件流（绝对定位和浮动在布局中的使用

必须知道的是：

float和position：absolute会让元素脱离文件流

其他元素就像没有看到这样的元素一样排列,（但是它可以看到其它元素

比如：


三列布局中，左边向左浮动右边向右浮动，中间没有看到左边，但是右边看到了中间，所以右边无法浮动在同一行，而是被挤下去，如果使用position：absolute;top:0;right:0就不会这样，但是去掉了top：0就会这样。

但是float的时候 其他元素（下面的元素）中的文字会看到float的元素，会为float元素让出位置，不过position：absolute不会。

脱离文件流也在DOM树中

布局有三种：

流式布局

浮动布局

绝对定位布局

流式布局 一列 居中

margin:0 auto;

浮动布局实现两列：

左边float：left

右边：float：right

绝对定位实现两列

左边 position:absolute;left:0；

右边 position:absolute;right:0

绝对定位实现三列布局：

左边固定 右边固定 中间自适应

左边 position:absolute;left:0；width：200px;

右边 position:absolute;right:0；width：300px;

中间 margin：0 300px 0 200px;

左右已经脱离文档流，所以中间当它俩不存在，跟它俩看起来是在同一行

元素会收到浮动影响，所以需要清除浮动

清除浮动的两种方法：

①clear：both

②width：100%；overflow：hidden；