文档流(浮动和定位)

文档流

文档流指的是文档中的标签在排列时所占用的位置。 将窗体自上而下分成一行行 ，并在每行中按从左至右的顺序排放标签，即为文档流。 也就是说在文档流中标签默认会紧贴到上一个标签的右边，如果右边不足以放下标签，标签则会另起一行，在新的一行中继 续从左至右摆放。

浮动

​ 浮动指的是使标签脱离原来的文档流，在父标签中浮动起来

​ 当一个标签浮动以后，其下方的标签会上移。标签中的内容将会围绕 在标签的周围。浮动会使标签完全脱离文档流，也就是不再在文档中在占用位置标签浮动以后即完全脱离文档流，这时不会再影响父标签的高度。也就是浮动标签不会撑开父标签

浮动带来的问题: 浮动后的标签没有撑开父标签 ,下面的标签会上移,会影响后面的网页布 别称:高度塌陷
解决方案: 1.给父标签设置具体的高度
2.清除浮动 清除浮动后,会默认将父标签撑开与浮动标签高度一致

/*浮动指的是使标签脱离原来的文档流，在父标签中浮动起来 
	 浮动使用float属性。
       none ：不浮动     left ：向左浮动   right ：向右浮动 
	 块级标签和行级标签都可以浮动，当一个行级标签浮动以后将会自动变为一个块级标签。
	 当一个块级标签浮动以后，宽度会默认是内容的宽度，所以当漂浮一个块级标签时我们都会为其指定一个宽度。
			 */
			.daohang{
				float: left;
			}

<!-- clear属性可以用于清除标签周围的浮动对标签的影响,其他标签的位置不发生变化。 
     left ：忽略左侧浮动    right :忽略右侧浮动    both ：忽略全部浮动
  -->
	  <div style="clear: left;"> </div>

定位

相对定位

相对定位: 相对于它的起点进行移动，移动后原来的位置还被占用。

可以通过position:relative; 开启相对定位，

left right top bottom四个属性来设置标签的偏移量。

相对定位的特点:

当标签的position属性设置为relative时，则开启了标签的相对定位

1.当开启了标签的相对定位以后，而不设置偏移量时，标签不会发生任何变化

2.相对定位是相对于标签在文档流中原来的位置进行定位

3.相对定位的标签不会脱离文档流

4.相对定位会使标签提升一个层级

5.相对定位不会改变标签的性质

#x1{
				position: relative;
				top: 100px;
			}

绝对定位

​ 绝对定位是不占空间的，运用了绝对定位的标签会脱离原来的文档流，浮动起来，因此视觉上会其他的标签重叠。

可以通过position: absolute; 开启绝对定位，

left right top bottom四个属性来设置标签的偏移量

绝对定位的特点:

1.当开启了标签的绝对定位以后，而不设置偏移量时，标签不会发生任何变化

2…绝对定位是相对于离他最近的开启了定位的祖先标签进行定位（一般情况，开启了子标签的绝对定位都会同时开启父标签的相对定位）

3.相对定位的标签会脱离文档流

4.相对定位会使标签提升一个层级

5.绝对定位会改变标签的性质，行级标签变成块标签

#x2{
				position: absolute;
				left: 50px;
    /* z-index:设置标签的堆叠顺序 。 
          如果定位标签的层级是一样，则下边的标签会盖住上边的
          通过z-index属性可以用来设置标签的层级
          可以为z-index指定一个正整数作为值，该值将会作为当前标签的层级,层级越高，越优先显示
          对于没有开启定位的标签不能使用z-index */
		      z-index: 1;
    }