CSS 文档流，定位

梦里梦外; 2022-05-25 13:15 204阅读 0赞

https://blog.csdn.net/qq\_35518293/article/details/77878512

没怎么系统学过html和css,有概念上的东西不清楚.但是今天听了大佬的课,收获很多.记下来,对自己理解html和css很有帮助. 下面的都是自己没有整理的,都是按照自己随意写的.

### 1. 文档流和脱离文档流 ###

正常的文档流就是标签所在的一个空间,脱离文档流就是标签在另外一个空间.   
可以想象,在页面中只有两个空间,一个正常的空间,还有一个在正常空间之上的空间.   
之后的东西都是在这两个空间上进行操作的.   
脱离文档流空间中是没有块级和行级属性的,且位置完全不固定.

### 2. float属性 ###

float属性设计出来用来实现图片环绕的,被用作了将块级元素变为同一行,因为脱离文档流空间是不存在行块属性的.   
在标签CSS样式中使用了float:left之后:本来在正常文档流空间的标签,会跑到脱离文档流空间中去.   
这样,原来标签所占有的空间会被释放,之后的标签就会占据这个浮动标签的位置.而在脱离文档流空间的标签会覆盖住正常文档流空间中的位置.覆盖的位置和left,right属性有关.

### 3. float和正常文档流交替使用 ###

将三个div使用float:left后,会排成一行,这个时候添加一个正常文档流,正常文档流会跑到最上面,被三个float的div覆盖住,所以要将这个三个div用一个空div去包裹,同时将这个空div从脱离文档流空间放到正常文档流中,这样才不会覆盖第四个正常文档流.空div使用 overflow:hidden属性将这个div假装成在正常文档流空间,所以下面的div会认为上面的div在正常文档流,所以会排在包裹div的后面.

### 4. 定位属性position ###

如果要子div相对于父div定位,需要用到position属性.

正常的标签是没有position属性的,产生距离需要使用margin属性勉强达到效果.使用left,top没效果.

如果父元素使用position:relative, 子元素使用 position:absolute ; left : 100px; 那么子元素相对于父元素右移100px;因为子元素使用position属性后,是脱离了文档流的,所以可以覆盖文档流中的div.   
注意:父元素relative 子元素absolute,会让子元素不能脱离父元素范围,但是实际上又是可以的.所以可以理解为 ”你是我儿子,你只能在我的范围内,但是非要跑出去,我也没有办法!”所以需要使用overflow:hidden 属性,这样属性超过父元素范围就会隐藏,也就是在父元素范围之外不能显示子div,达到不能超过父元素范围的效果.

还有一种,relative相对于自己定位,自己在文档流中占据的位置不会消失,而是保留,absolute是不保留原来的位置的.使用relative后,left:100px; 相对于自己原来的位置偏移100px;此时是在脱离文档流中的,所以可以覆盖正常文档流中的标签.