css-关于position与float

发表于 | 分类于 | 阅读次数:

前言

面试过程中吃了css很多亏了。。。。

position

static

static是默认值，任意的position:static;不会被特殊定位。一个 static 元素表示它不会被“positioned”，一个 position 属性被设置为其他值的元素表示它会被“positioned”。

relative

relative 表现的和 static 一样，除非你添加了一些额外的属性。

在一个相对定位（position属性的值为relative）的元素上设置 top、 right 、 bottom 和 left 属性会使其偏离其正常位置。其他的元素的位置则不会受该元素的影响发生位置改变来弥补它偏离后剩下的空隙。

fixed

一个固定定位（position属性的值为fixed）元素会相对于视窗来定位，这意味着即便页面滚动，它还是会停留在相同的位置。和 relative 一样， top 、 right 、 bottom 和 left 属性都可用。一个固定定位元素不会保留它原本在页面应有的空隙（脱离文档流）。

absolute

absolute 与 fixed 的表现类似，但是它不是相对于视窗而是相对于最近的“positioned”祖先元素。如果绝对定位（position属性的值为absolute）的元素没有“positioned”祖先元素，那么它是相对于文档的 body 元素，并且它会随着页面滚动而移动。记住一个“positioned”元素是指 position 值不是 static 的元素。

sticky

粘性定位是相对定位和固定定位的混合。元素在跨越特定阈值前为相对定位，之后为固定定位。例如：

1
#one { position: sticky; top: 10px; }

在 viewport 视口滚动到元素 top 距离小于 10px 之前，元素为相对定位。之后，元素将固定在与顶部距离 10px 的位置，直到 viewport 视口回滚到阈值以下。

粘性定位常用于定位字母列表的头部元素。标示 B 部分开始的头部元素在滚动 A 部分时，始终处于 A 的下方。而在开始滚动 B 部分时，B 的头部会固定在屏幕顶部，直到所有 B 的项均完成滚动后，才被 C 的头部替代。

须指定 top, right, bottom 或 left 四个阈值其中之一，才可使粘性定位生效。否则其行为与相对定位相同。

详细例子

float

成因

浮动的框可以左右移动，直到遇到另一个浮动框或者遇到它外边缘的包含框。浮动框不属于文档流中的普通流，当元素浮动之后，不会影响块级元素的布局，只会影响内联元素布局。此时文档流中的普通流就会表现得该浮动框不存在一样的布局模式。当包含框的高度小于浮动框的时候，此时就会出现“高度塌陷”。即为何我们需要清楚浮动。下面的例子即展示何为塌陷。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .continer{
            width: 100%;
            background-color: cyan;
        }
    </style>
</head>
<body>
<div class="continer">
<p>一个段落一个段落一个段落一个段落一个段落一个段落一个段落一个段落一个段落一个段落一个段落一个段落</p>
<img src="http://upload-images.jianshu.io/upload_images/7166236-c63177cb4cbaadab.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240" >
<p>两个段落</p>
</div>
</body>
</html>

显示如下：

现在使图片右浮动，效果如下：

1
2
3
img{
  float: right;
}

清除浮动

第一种方法：

1
2
3
4
5
6
7
8
9
10
.clear {
clear: both;
}

<div class="continer">
    <p>一个段落一个段落一个段落一个段落一个段落一个段落一个段落一个段落一个段落一个段落一个段落一个段落</p>
    <img src="http://upload-images.jianshu.io/upload_images/7166236-c63177cb4cbaadab.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240" >
    <p>两个段落</p>
    <div class="clear"></div>
</div>

优点：简单，代码少，浏览器兼容性好。
缺点：需要添加大量无语义的html元素，代码不够优雅，后期不容易维护。

第二种方法：

1
2
3
4
5
.continer{
  width: 100%;
  background-color: cyan;
  overflow: auto; zoom: 1; zoom: 1; /*是在处理兼容性问题*/
}

Demo

demo1

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        div {
            margin-top: 40px;
        }
        .static{
            position: static;
            width: 500px;
            height: 100px;
            border: 2px solid
        }
        .relative1{
            position: relative;
            width: 500px;
            height: 100px;
            border: 2px solid;
        }
        .relative2{
            position: relative;
            width: 500px;
            height: 100px;
            border: 2px solid;
            top: -80px;
            left: 80px;
        }

        .fixed{
            position: fixed;
            bottom: 300px;
            right: 0;
            width: 100px;
            height: 100px;
            border: 2px solid;
        }

        .relative3{
            position: relative;
            width: 500px;
            height: 500px;
            border: 2px solid
        }
        .absolute{
            position: absolute;
            top:200px;
            right: 0;
            width: 200px;
            height: 100px;
            border: 2px solid
        }
    </style>
</head>
<body>
<div class="static">
    <span>
        static是默认值，任意的position:static;不会被特殊定位。一个static元素表示他不会被“positioned”，一个position属性被设置为其他元素表示他会被“positioned”。
    </span>
</div>

<div>
    <div class="relative1">
        <span>relative表现和static一样，除非增加了一些额外的属性</span>
    </div>
    <div class="relative2">
        <span>在一个相对定位（position属性的值为relative）的元素上设置 top 、 right 、 bottom 和 left 属性会使其偏离其正常位置。其他的元素的位置则不会受该元素的影响发生位置改变来弥补它偏离后剩下的空隙。</span>
    </div>
    <div class="relative1">
        <span>relative表现和static一样，除非增加了一些额外的属性</span>
    </div>
</div>

<div class="fixed">
    fixed定位
</div>


<div class="relative3">
    这个元素是相对定位的。如果它是 position: static; ，那么它的绝对定位子元素会跳过它直接相对于body元素定位。
    <div class="absolute">
        这个元素是绝对定位的。它相对于它的父元素定位。
    </div>
</div>
</body>
</html>

demo2

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .continer{
            width: 100%;
            background-color: cyan;
            /*overflow: auto; zoom: 1; zoom: 1; 是在处理兼容性问题*/
        }
        img{
            float: right;
        }
        .clear {
            clear: both;
        }
    </style>
</head>
<body>
<div class="continer">
    <p>一个段落一个段落一个段落一个段落一个段落一个段落一个段落一个段落一个段落一个段落一个段落一个段落</p>
    <img src="http://upload-images.jianshu.io/upload_images/7166236-c63177cb4cbaadab.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240" >
    <p>两个段落</p>
    <div class="clear"></div>
</div>

</body>
</html>

Reference

MDN–position

position

理解为何需要清除浮动及清除浮动的方法