CSS 浮动 and 定位

1. CSS 浮动 (Float)

CSS浮动 is a传统 布局techniques, 用于使元素脱离正常 documentation流, 并向 left or 向 right move, 直 to 它 edge缘碰 to package含块 or 另一个浮动元素 edge缘.

1.1 浮动 basic语法

/* 元素向 left 浮动 */
选择器 {
    float: left;
}

/* 元素向 right 浮动 */
选择器 {
    float: right;
}

/* 清除浮动 (不浮动)  */
选择器 {
    float: none;
}

1.2 浮动 working principles

当一个元素设置了浮动property after , 它会:

1. 脱离正常 documentation流, 但仍然保持 in 父元素 in 部
2. 向 left or 向 right move, 直 to 碰 to package含块 edge缘 or 另一个浮动元素
3. other元素会环绕 in 浮动元素 周围
4. 浮动元素 high 度不会被package含块自动计算 (这会导致父元素 high 度塌陷)

1.3 浮动example

1.4 清除浮动 (Clear Float)

当元素设置了浮动property after , 它会脱离正常 documentation流, 导致父元素 high 度塌陷. for Understand决这个issues, 我们需要清除浮动.

1.4.1 usingclearproperty

/* 清除 left 侧浮动 */
选择器 {
    clear: left;
}

/* 清除 right 侧浮动 */
选择器 {
    clear: right;
}

/* 清除两侧浮动 */
选择器 {
    clear: both;
}

/* 不清除浮动 */
选择器 {
    clear: none;
}

1.4.2 usingclearfixtechniques

clearfix is a常用 清除浮动 techniques, through伪元素来清除浮动, 不需要额 out HTML元素.

/* clearfixtechniques */
.clearfix::after {
    content: "";
    display: table;
    clear: both;
}

2. CSS 定位 (Position)

CSS定位 is a更精确 布局techniques, 用于将元素放置 in 页面 specific位置. through设置positionproperty, 可以改变元素 定位方式.

2.1 定位 basic语法

选择器 {
    position: 定位class型;
    top: 值;
    right: 值;
    bottom: 值;
    left: 值;
    z-index: 值;
}

2.2 定位class型

CSSproviding了五种定位class型:

1. static: 默认值, 元素按照正常 documentation流排列
2. relative: 相 for 定位, 元素相 for 于其正常位置for定位
3. absolute: 绝 for 定位, 元素相 for 于其最近 已定位祖先元素for定位
4. fixed: 固定定位, 元素相 for 于浏览器窗口for定位
5. sticky: 粘性定位, 元素 in 滚动 to specific位置时变 for 固定定位

2.3 相 for 定位 (Relative Positioning)

相 for 定位 is 指元素相 for 于其正常位置for定位. 设置了相 for 定位 元素仍然占据原来 空间, 不会脱离正常 documentation流.

/* 相 for 定位example */
.relative {
    position: relative;
    top: 20px;
    left: 30px;
}

2.4 绝 for 定位 (Absolute Positioning)

绝 for 定位 is 指元素相 for 于其最近 已定位 (非static) 祖先元素for定位. 设置了绝 for 定位 元素会脱离正常 documentation流, 不再占据原来 空间.

/* 绝 for 定位example */
.parent {
    position: relative; /* 父元素设置 for 相 for 定位, serving as定位reference */
    width: 300px;
    height: 200px;
    background-color: #f0f0f0;
}

.child {
    position: absolute;
    top: 50px;
    left: 50px;
    width: 100px;
    height: 100px;
    background-color: #4285F4;
}

2.5 固定定位 (Fixed Positioning)

固定定位 is 指元素相 for 于浏览器窗口for定位. 设置了固定定位 元素会脱离正常 documentation流, 并且无论页面such as何滚动, 它都会保持 in 相 for 于浏览器窗口 固定位置.

/* 固定定位example */
.fixed {
    position: fixed;
    bottom: 20px;
    right: 20px;
    width: 100px;
    height: 100px;
    background-color: #FBBC05;
}

2.6 粘性定位 (Sticky Positioning)

粘性定位 is 相 for 定位 and 固定定位 结合. 元素 in 滚动 to specific位置之 before is 相 for 定位, 滚动 to specific位置之 after 变 for 固定定位.

/* 粘性定位example */
.sticky {
    position: sticky;
    top: 0;
    background-color: #34A853;
    color: white;
    padding: 10px;
}

2.7 z-indexproperty

z-indexproperty用于控制定位元素 堆叠顺序. z-index值越 big , 元素 in 堆叠顺序in越靠 on .

/* z-indexexample */
.layer1 {
    position: absolute;
    z-index: 1;
}

.layer2 {
    position: absolute;
    z-index: 2; /* 这个元素会显示 in layer1  on 面 */
}

3. 浮动 and 定位 区别

浮动 and 定位都 is CSS布局techniques, 但它们 has 一些 important 区别:

features	浮动 (Float)	定位 (Position)
documentation流	脱离正常documentation流, 但other元素会环绕它	absolute and fixed会完全脱离documentation流, relative会保持原来 位置
定位方式	只能向 left or 向 right 浮动	可以精确定位 to 任意位置
父元素 high 度	会导致父元素 high 度塌陷, 需要清除浮动	absolute and fixed不会影响父元素 high 度, relative会影响
主要用途	graph文混排, many 列布局	精确定位, 固定导航, 弹窗etc.

4. 练习