详细分析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;
}
```
-
底部信息栏
css
.footer {
position: absolute;
bottom: 0;
left: 0;
right: 0;
height: 50px;
background-color: #f5f5f5;
}
Float 和 Position 的区别
Float 和 Position 都可以定位元素,但定位方式不同:
Float 定位:
* 将元素从文档流中删除,影响其后面的元素布局
* 过度使用 float 可能会导致代码难以维护
Position 定位:
* 定位方式有多种,可以根据需求选择
* 对其他元素的影响较小,常用于局部定位
综上,Float 和 Position 有各自的特点和适用场景,合理使用可以提高网页布局效果。
示例说明
-
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 元素向左浮动,并占据了一部分空间。段落文字则在剩余空间中填充,实现了图片环绕文字的效果。
-
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) 的位置。段落文字则在其下方填充。
本站文章如无特殊说明,均为本站原创,如若转载,请注明出处:详细分析css float 属性以及position:absolute 的区别 - Python技术站