css脱离文本流是什么意思

html-css06

css脱离文本流是什么意思,第1张

前面两位有点误导楼主哦。

首先,什么是文本流?

简单的说可以理解为元素在页面出现的先后顺序。

比如上面三句 他们就是按默认的文本流出现的,

一旦用到相对定位或者觉得定位,他们就会脱离以上文本流

也就是说 脱离文本流的元素可以任意按照要求布局,即可任意改变他在文档中出现的位置。

楼主看看浮动相关文章,理解DIV布局的灵活特点应该就不难理解这些东西了!

     Css的定位机制分为普通流(文档流)、浮动(float)、定位(position)其中普通流就是文档流,在Html中的写法是从上到下,从左到右的排版布局,其中块级元素独占一行,而内联元素不独占一行。对于文档流来说它的默认position是static就是没有定位。

      position规定元素的定位类型,任何元素都可以定位,不过绝对或固定元素会生成一个块级框,而不管该元素本身是个什么类型,相对元素会相对与它的正常流的默认位置作出偏移。具体:static,position的默认值,表示没有定位,忽略top,left,bottom,right和z-index的影响;absolute,生成绝对定位元素,相对于static定位之外的第一个父元素进行定位,元素位置通过left,top,bottom,right设置;fixed,生成绝对定位元素,相对于浏览器窗口进行定位,通过left,top,bottom,right设置;relative,生成相对定位元素,相对于其正常文档流中的位置进行定位,通过left,top,botton,right设置(注意相对正常位置);inherit规定应该从父元素处继承position属性。

       浮动模型是一种可视化格式模型,浮动的框可以左右移动,直到它的外边缘碰到包含框或者另一个浮动元素的边框,如果包含的框中没有足够的宽度容纳浮动元素那么多余的就会下移。浮动元素不在文档的普通流中,就好比浮动元素在文档流中不存在似的。

       从上面我们知道,被设置了absolute的元素或者float的元素都会脱离文档流,虽然正常的显示还在,但是它其实不占文档流中的空间位置。在float脱离文档流的时候虽然其他盒子无视他,但盒子中的文本围绕它,而absolute脱离文档流会造成其他盒子和盒子的文本都会无视他。