CSS备忘录（三）：float&position

一. float

1. 浮动

浮动，顾名思义，就是让元素在页面中像漂浮一样移动。浮动元素会完全脱离文档流，不再占据文档流中的位置。设置浮动以后元素会向父元素的左侧或右侧移动，浮动元素默认不会从父元素中移出。浮动元素向左或向右移动时，不会影响其他元素的位置。

2. 浮动的特点

• 浮动元素会完全脱离文档流，不再占据文档流中的位置
• 设置浮动以后元素会向父元素的左侧或右侧移动
• 浮动元素默认不会从父元素中移出
• 浮动元素向左或向右移动时，不会影响其他元素的位置

3. 浮动元素的应用场景

• 当您需要将元素并排排列时，可以使用浮动
• 当您需要将元素环绕在另一个元素周围时，可以使用浮动
• 当您需要将元素固定在页面的一侧时，可以使用浮动

二. position

1. 定位

定位是CSS中非常重要的一个属性，它允许您将元素放置在页面中的任意位置。定位有四种类型：

• 绝对定位
• 相对定位
• 固定定位
• 粘性定位

2. 绝对定位

绝对定位是最常用的定位类型之一。绝对定位的元素会脱离文档流，并根据您设置的left、top、right、bottom属性值进行定位。绝对定位的元素不会影响其他元素的位置。

3. 相对定位

相对定位的元素会根据您设置的left、top、right、bottom属性值相对于其原始位置进行定位。相对定位的元素不会脱离文档流，但会影响其他元素的位置。

4. 固定定位

固定定位的元素会脱离文档流，并根据您设置的left、top、right、bottom属性值进行定位。固定定位的元素会一直停留在页面上，即使您滚动页面，它也不会移动。

5. 粘性定位

粘性定位是CSS3中新增的一种定位类型。粘性定位的元素在页面滚动时会保持在页面上的固定位置，直到它到达您设置的粘性定位边界。粘性定位的元素既不会脱离文档流，也不会影响其他元素的位置。

三. float和position的区别

float和position都是CSS中非常重要的布局属性，但它们之间还是存在一些区别的。

• float只允许您将元素在页面中水平移动，而position允许您将元素在页面中任意位置移动
• float不会脱离文档流，而position会脱离文档流
• float不会影响其他元素的位置，而position会影响其他元素的位置

四. 结语

float和position都是非常强大的CSS属性，它们可以帮助您轻松实现各种复杂的布局效果。希望这篇CSS备忘录能够帮助您更好地掌握float和position这两个属性，让您的网页布局更加灵活多变。