浮动

文档流

文档流就是按照html的编写顺序,自上到下,自左到右的方式流式显示。

块元素单独占一行,并顺次向下排列,行内元素在一行内从左到右排列。

浮动的语法

浮动有两种,分别是左浮动与右浮动,语法分别为:

1
2
float: left;
float: right;

浮动的特性

被设置浮动的元素会按照设置向左或向右浮动,同时会向上浮动,当元素碰到父元素边界、浮动元素、未浮动的元素才会停止浮动。

元素被设置浮动后会脱离原文档流,其余元素继续按文档流排序显示。

浮动简单的可以理解为,被设置浮动的元素脱离了文档流,并置顶显示,其他元素继续按文档流排序并会占用被设置浮动的元素的位置。

注意,其余元素按文档流排序时会占用前面的被设置浮动的元素的位置,但是其中的文字会避开置顶显示的浮动元素,由此可以形成文字环绕显示的排版方式。

具体看下面例子:

初始效果

image-20210306192956992

给one设置左浮动:

1
2
3
4
5
6
7
8
9
10
11
.one{
width: 200px;
height: 200px;
background-color: red;
float: left;
}
.two{
width: 300px;
height: 300px;
background-color: sandybrown;
}

设置后效果:

image-20210306193253584

可以看到,被设置浮动的元素one置顶显示,且two占用了原one的位置。

但是two中的文字避开了one的位置,形成了文字环绕显示。

下一个例子:

初始效果:

image-20210306193610744

给three设置右浮动:

1
2
3
4
5
6
.three{
width: 200px;
height: 200px;
background-color: blue;
float: right;
}

设置后效果:

image-20210306193740284

可以看到,当给three设置了右浮动后,three会向右浮动,直至遇到body的边界停止,而three的上面有未浮动元素,所以停止向上浮动,只会向右浮动。

定位

position属性

可以用css的position属性设置定位方式。

可选项有:

relative:生成相对定位元素,元素所占据的文档流的位置不变,元素本身相对文档流的位置进行偏移。

absolute:生成绝对定位元素,元素脱离文档流,可以理解为漂浮在文档流的上方,相对于上一个设置了定位的父级元素来进行定位,如果找不到,则相对于body元素进行定位。

fixed:生成固定定位元素,元素脱离文档流,相对于浏览器窗口进行定位。

static:默认值,没有定位,元素出现在正常的文档流中,相当于取消定位属性或者不设置定位属性。

例如:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
<style>
*{
margin: 0;
padding: 0;
}
p{
font-size: 30px;
position: relative;
left: 20%;
}
</style>
<body>
<p>Test</p>
</body>

image-20210306201033719

注意:

定位元素特性:绝对定位和固定定位的块元素和行内元素会自动转化为行内块元素。

定位元素的层级:定位元素是浮动在正常的文档流之上的,可以用z-index属性来设置元素的层级,数越大的层级越高。