详细分析css float 属性以及position:absolute 的区别

CSS Float 属性

CSS Float 属性常用于制作文字环绕效果。设置浮动属性后，元素会跳出常规的文档流，根据浮动元素的宽度，向左或向右移动至其的包含块的边缘，其他内容会填补其旁边的可用空间。使用 Float 属性的元素被称为浮动元素。

Float 常见取值及应用

float 取值：
* left：元素向左浮动
* right：元素向右浮动
* none：元素不浮动

常见应用场景：
1. 图片环绕文字
html
<div style="width: 500px;">
<img src="xxx.jpg" style="float: left; margin: 10px;">
<p style="text-align: justify;">此处为段落文字。</p>
</div>
2. 清除浮动

在浮动布局中，为了防止下一元素影响浮动元素的位置而采用清除浮动。最常用的清除浮动的方式为添加 clear 属性。

```css
.clearfix::after {
    content: "";
    display: table;
    clear: both;
}
```

```html
<div class="clearfix">
    <div style="float: left;">左侧</div>
    <div style="float: right;">右侧</div>
</div>
<div>下方非浮动元素</div>
```

CSS position 属性

CSS position 属性用于指定元素的定位方式。使用 position 属性，可以将元素从文档流中删除，并相对于其父元素或文档的窗口进行定位。

position 属性常见取值及应用

position 取值：
* static：默认值，元素被定义为常规元素，处于文档流中
* relative：元素相对于自身的位置进行定位
* absolute：元素相对于其第一个具有定位方式的祖先元素进行定位
* fixed：元素相对于浏览器窗口进行定位
* sticky：元素在滚动过程中固定在位置

常见应用场景：
1. 固定顶部/底部导航栏

```css
.navbar {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    height: 50px;
    background-color: #f5f5f5;
}
```

1. 底部信息栏

   css
.footer {
position: absolute;
bottom: 0;
left: 0;
right: 0;
height: 50px;
background-color: #f5f5f5;
}

Float 和 Position 的区别

Float 和 Position 都可以定位元素，但定位方式不同：

Float 定位：
* 将元素从文档流中删除，影响其后面的元素布局
* 过度使用 float 可能会导致代码难以维护

Position 定位：
* 定位方式有多种，可以根据需求选择
* 对其他元素的影响较小，常用于局部定位

综上，Float 和 Position 有各自的特点和适用场景，合理使用可以提高网页布局效果。

示例说明

1. Float 示例
   html
<div style="width: 500px;">
<div style="float: left; width: 200px; height: 200px; background-color: #f5f5f5;"></div>
<p style="text-align: justify;">此处为段落文字。</p>
</div>

   上面的代码中，左侧的 div 元素向左浮动，并占据了一部分空间。段落文字则在剩余空间中填充，实现了图片环绕文字的效果。

2. Position 示例
   html
<div style="position: relative; width: 500px; height: 300px;">
<div style="position: absolute; top: 50px; left: 50px; width: 200px; height: 100px; background-color: #f5f5f5;"></div>
<p style="text-align: justify;">此处为段落文字。</p>
</div>
   上面的代码中，左侧的 div 元素被设置为相对于其父元素进行定位，左上角定位在 (50, 50) 的位置。段落文字则在其下方填充。