欢迎来到DIVCSS5查找CSS资料与学习DIV CSS布局技术!

 

标准文档流,顾名思义,是要按照一定规矩排列的,默认的就是元素会从左至右,从上至下排列,块级会独占一行,行内元素会和小伙伴们共享一行。

本来在标准文档流下,各个元素相安无事,可突然有一天某个元素心想啊,我那么优秀,不该出现在这里啊,于是它成精了,它发现了一道大门走向另一个空间BFC。

BFC:直译为“块级格式化上下文”,这是一个独立的区域,这个区域与外部没有关系了,互不招惹,个人常用的会开启BFC空间的方式有

1.float的值不是none

2.position的值不为relative和static

3.display为inline-block

4.overflow不为visible

当然还有其他的方式会产生BFC,这里就不列举了。

web前端浅谈,htmlcss脱离标准文档流相关

推荐下我自己的web前端学习交流群:675498134,不管你是小白还是大神,我都欢迎你们过来学习交流,不定期分享干货,包括我自己整理的最新的前端资料和教程送给大家,欢迎初学和进阶中的小伙伴。

先说说float,浮动,它会相对于自己最近的父元素进行定位,往左或者往右,这种方式会给我们。布局带来便利,也可以变相的清除一些空文本给我们带来的不必要的空隙,但是使用它的时候需要注意清除它,不然由于它会脱离文档流的缘故,它的兄弟元素会跑到它原来的位置占位,或者它的父元素会因此而坍塌,这样会造成布局的混乱,就好比是在同一个位置,不同的时空,虽然浮动之后的元素还在,但是其他元素却看不见它,当然这个比喻并不怎么恰当,为了防止布局的混乱,也就是浮动之后带来的你不想要的效果,浮动之后一定要记得清除浮动,清除浮动常用的方式可以直接clear掉,当然也可以使用伪类:after来清除浮动,对于overflow:hidden,还有给浮动元素的父元素设置float来撑开父元素的高度,其原理也是开启BFC,而BFC在计算高度的时候,浮动元素也会参与其中。

web前端浅谈,htmlcss脱离标准文档流相关

再说说position,position定位也是一种脱离普通文档流的做法,它的定位方式是相对于最近的已经定位的祖先元素,常见的方式就是子绝父相,子元素绝对定位,父元素相对定位,使用这种方式可以让子元素相对于父元素做定位,使用position:absolute的时候记得设置x,y轴的值,也就是left,top(当然也可以rigth,top,具体情况自己决定)的值,目前我不知道有什么方式可以让position为absolute与fixed的元素再从自己开辟的BFC中出来,建议只在必须的情况下使用position定位,因为position定位使用多了,大家都脱离了普通文档流,可能会给后续的布局带来困难,既然说到了position,那就顺带再提提z-index,z-index相当于布局中的z轴,在使用了position:relative 或者absolute 或者fixed的时候z-index值便会生效,简单的说如果有几个元素重叠在了一起,这时z-index后面的值谁大,谁就会显示,其实其它元素也还在,只是被z-index值最大的那个元素挡住了,注意z-index后面的值没有单位的哈。

web前端浅谈,htmlcss脱离标准文档流相关

如需转载,请注明文章出处和来源网址:http://www.divcss5.com/w3c/w50438.shtml