【九月打卡】第20天 前端工程师2022版 浮动与定位

课程名称：前端工程师2022版
课程章节：浮动与定位
课程讲师： 慕课网
课程目标：掌握CSS3 浮动与定位
课程内容：
1.浮动
2.定位

---

1. 浮动

HTML页面的标准文档流：
从上到下，从左到右，遇到块级元素换行。
浮动元素：
浮动元素则是脱离了文档流，“漂浮”在页面之上、父元素（默认为body标签）的边框之内。
当一个元素成为浮动元素，就会空出原来在文档流中的位置，后续的元素会自动顶替它的位置。
浮动元素本身多大就占多大空间，没有块级元素的概念。

选择器 {
    float: 方向;
}

方向可以写：
​ left：向左浮动。
right ：向右浮动。
none ：默认值，不浮动。
inherit：从父元素继承float属性。
标签的塌陷问题及解决方法
父标签的塌陷问题：
父元素（图中的黑框）没有设置尺寸，全靠子元素（图中的元素A）“撑开”。当子元素浮动后，脱离文档流，就会导致父元素塌陷。
事先写好以下代码，之后在要解决塌陷问题的标签上，添加calss=clearfix属性即可:

.clearfix:after {
    content: '';
    display: block;
    clear: both;
}

2. 定位

1. 定位方法
   静态定位：
   所有的标签默认都是固定的，无法改变位置。默认属性值为：position: static;。
   如果需要修改位置，就需要先修改position属性。且修改完该属性后，无论是否修改标签的位置，该标签都会被视为定位过的标签。
   相对定位：
   相对于标签原来的位置进行移动。
   属性值为：position: relative;。

绝对定位：
相对于已经定位过的父标签进行移动。如果父标签没有进行过定位，就以body标签为参照进行移动。
属性值为：position: absolute;。

固定定位：
相对于浏览器窗口，固定在某个位置。
属性值为：position: fixed;。

绝对定位、固定定位是脱离文档流的；
相对定位、静态定位则不脱离。
2. 修改位置
设置完定位方法，就可以修改位置了：

选择器 {
    top: 偏移量;
    bottom: 偏移量;
    left: 偏移量;
    right: 偏移量;
}

---

课程截图：