CSS脱离文档流

原创 2017年09月10日 20:31:10

脱离文档流
也就是将元素从普通的布局排版中拿走,其他盒子在定位的时候,会当做脱离文档流的元素不存在而进行定位。需要注意的是,使用float脱离文档流时,其他盒子会无视这个元素,但其他盒子内的文本依然会为这个元素让出位置,环绕在周围。,其他盒子与其他盒子内的文本都会无视它。
float
这里写图片描述
如上图 div2实际被div1遮盖住了 我们可以将div2显示出来
这里写图片描述
原因可看层叠上下文
div2的内容(文本及图片)依然为div1元素让出位置,所以默认往下写也就到了div3所在的区域,但是其文本宽度依然受到其父div的宽度显示(2222连续写如英文单词一样默认不会拆开,中文会拆开换行)
position:absolute
这里写图片描述
div2和其内容无视了div1
position:relative
这里写图片描述
relative只是基于其本身位置发生偏移,会保留其原来的位置
absolute是基于其父亲(position元素)发生偏移,不保留原来的位置

float
这里写图片描述
这里写图片描述
float也类似与正常的布局 线性向下

版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/zsytechnology/article/details/77924787

明盒开发

明盒开发未经允许,严禁转载本栏目内容本文经许可转载自软件工程专家网www.21cmm.com,未经CSDN许可,请勿随便转载,谢谢合作(一) 明盒结构  明盒定义了实现转换状态盒功能的过程。明盒和相应...
  • gigix
  • gigix
  • 2002-03-14 10:15:00
  • 1681

css中脱离文档流的理解

上次去面试一家公司,那家公司的技术总监问我什么叫脱离文档流,当时我一下愣住了,这个是作为一个前端工作者在工作中经常会遇到的问题,我们频繁地用着,然而却不能用语言表达出它的意思。我不由得思考为什么会这样...
  • halze_eyes
  • halze_eyes
  • 2016-01-11 10:28:55
  • 1024

CSS布局之脱离文档流详解——浮动、绝对定位脱离文档流的区别

所谓脱离文档流,即将元素从普通的布局排版中拿走,其他盒子在定位的时候,会当没看到它,两者位置重叠都是可以的。这里,通过讲解浮动脱离文档流(float)和绝对定位脱离文档流(position:absol...
  • ParanoidYang
  • ParanoidYang
  • 2017-03-14 22:15:13
  • 4753

html/css DOM脱离文档流的几种情况

所谓的文档流,指的是元素排版布局过程中,元素会自动从左往右,从上往下的流式排列。并最终窗体自上而下分成一行行, 并在每行中按从左至右的顺序排放元素。脱离文档流即是元素打乱了这个排列,或是从排版中拿走。...
  • lck898989
  • lck898989
  • 2017-10-21 16:29:04
  • 343

关于css脱离标准文档流的两种方式

所谓脱离标准文档流就是将元素从普通的布局排版中拿走,其他盒子在定位的时候,会当做脱离文档流的元素不存在而进行定位。 第一种方式:浮动(float):不浮动的盒子会无视浮动的盒子,假使现有两个盒子,一个...
  • tongxinmiao
  • tongxinmiao
  • 2016-09-09 13:35:33
  • 4997

CSS浮动框是否脱离文档流?

CSS浮动框是否脱离文档流? http://www.th7.cn/web/html-css/201401/17089.shtml
  • golden_wheat
  • golden_wheat
  • 2016-12-09 11:45:57
  • 848

CSS之脱离文档流

脱离文档流脱离文档流,也就是将元素从普通的布局排版中拿走,其他盒子在定位的时候,会当做脱离文档流的元素不存在而进行定位。需要注意的是,使用float脱离文档流时,其他盒子会无视这个元素,但其他盒子内的...
  • SkullSky
  • SkullSky
  • 2016-09-11 15:01:19
  • 1043

css中脱离文档流解惑

先来了解一下block元素和inline元素在文档流中的排列方式。   block元素通常被现实为独立的一块,独占一行,多个block元素会各自新起一行,默认block元素宽度自动填满其父元素宽...
  • xiaoninvhuang
  • xiaoninvhuang
  • 2017-04-03 18:40:12
  • 378

html/css基础篇——DOM中关于脱离文档流的几种情况分析

所谓的文档流,指的是元素排版布局过程中,元素会自动从左往右,从上往下的流式排列。并最终窗体自上而下分成一行行, 并在每行中按从左至右的顺序排放元素。脱离文档流即是元素打乱了这个排列,或是从排版中拿走。...
  • chen_hua89
  • chen_hua89
  • 2016-03-08 09:24:29
  • 1459

子Div脱离文档流后怎么撑开父Div

子Div脱离文档流后怎么撑开父Div
  • Corazhang
  • Corazhang
  • 2017-09-09 10:00:49
  • 631
收藏助手
不良信息举报
您举报文章:CSS脱离文档流
举报原因:
原因补充:

(最多只允许输入30个字)