html 浮动脱离文档流,脱离文档流（正常流-文档流）

一、文档流定义

将窗体自上而下分成一行一行,

块级元素从上至下、 行内元素在每行中按从左至右的挨次排放元素,即为文档流。

二、行内元素、块级元素、行内块级元素

1、行内元素

span、em、i，以及有sub和sup这两个标签可以直接做出平方的效果sub sup。

特征：

设置宽高无效

对margin仅设置左右方向有效，上下无效；padding设置上下左右都有效，即会撑大空间

不会自动进行换行

2、块级元素

div、p、h1-h6，以及有html5里面的header, section, footer, aside, nav, main, article, figure。

特征：

能够识别宽高

margin和padding的上下左右均对其有效

可以自动换行

多个块状元素标签写在一起，默认排列方式为从上至下。

3、行内块级元素

结合行内元素和块级元素的特性

特征：

不自动换行

能够识别宽高

默认排列方式为从左到右

三、脱离文档流

1、浮动

浮动元素不占任何正常文档流空间， 而浮动元素的定位照样基于正常的文档流父级元素 ，然后从文档流中抽出并尽能够远的挪动至左侧或许右侧。当一个元素脱离正常文档流后，依然在文档流中的其他元素将忽略该元素并填补其原先的空间。

但浮动元素，与行内元素相遇， 行内元素 并不会占用浮动元素的空间. 用浮动实现布局，父级元素 塌缩就是因为浮动元素不在正常流中。

2、绝对定位

绝对定位是依赖于相对定位的，如果父级元素没有相对定位，会一级一级的找上去

基于文档流，理解以下的定位形式:

相对定位：元素框偏移某个距离。元素仍保持其未定位前的形状，它原本所占的空间仍保留。

绝对定位：即完全离开文档流, 相关于position属性非static值的比来父级元素进行偏移。

absolute：绝对定位。将对象从文档流中拖出，使用left，right，top，bottom等属性相对于其最接近的一个最有定位设置的父对象进行绝对定位。如果不存在这样的父对象，则依据body对象。而其层叠通过z-index属性定义

注：当只设置position:absolute,不设置 left，right，top，bottom时，元素的位置，还是在原来的位置。

3、固定定位

固定定位：即完全离开文档流，相关于视区进行偏移。

对于定位要注意：

对于absolute和fixed定位的固定尺寸(设置了width和height属性值)元素，如果设置了top和left属性，那么设置bottom和right值就没有作用了，应该是top和left优先级高，否则同时写了浏览器怎么知道按照谁定位

对于absolute和fixed定位的元素，如果设置了top、left、bottom、right的值后margin属性以及后float属性都会失效

块元素如果设置了float属性或者是absolute、fixed定位，那么vertical-align属性不再起作用

4、display:none;算不算脱离文档流