您现在的位置:首页 >> 前端 >> 内容

CSS脱离文档流

时间:2017/9/12 9:32:00 点击:

  核心提示:脱离文档流也就是将元素从普通的布局排版中拿走,其他盒子在定位的时候,会当做脱离文档流的元素不存在而进行定位。需要注意的是,使用float脱离文档流时,其他盒子会无视这个元素,但其他盒子内的文本依然会为...

脱离文档流

也就是将元素从普通的布局排版中拿走,其他盒子在定位的时候,会当做脱离文档流的元素不存在而进行定位。需要注意的是,使用float脱离文档流时,其他盒子会无视这个元素,但其他盒子内的文本依然会为这个元素让出位置,环绕在周围。其他盒子与其他盒子内的文本都会无视它。

float

CSS脱离文档流

如上图 p2实际被p1遮盖住了 我们可以将p2显示出来

CSS脱离文档流

原因可看层叠上下文

p2的内容(文本及图片)依然为p1元素让出位置,所以默认往下写也就到了p3所在的区域,但是其文本宽度依然受到其父p的宽度显示(2222连续写如英文单词一样默认不会拆开,中文会拆开换行)

position:absolute

CSS脱离文档流

p2和其内容无视了p1

position:relative

CSS脱离文档流

relative只是基于其本身位置发生偏移,会保留其原来的位置

absolute是基于其父亲(position元素)发生偏移,不保留原来的位置

Tags:CS SS S脱 脱离 
作者:网络 来源:小前端