css中position和float

CSS中的position属性用于指定元素在文档中的定位方式。position属性有四个值：static、relative、absolute和fixed。

1、static：默认值，元素按照正常文档流进行排列，不受top、right、bottom和left属性的影响。示例代码如下：

<div class="8e01-1525-d2e5-6ccf box">Static</div>
<style>
.box {
  position: static;
  width: 200px;
  height: 200px;
  background-color: red;
}
</style>

2、relative：元素相对于其正常位置进行定位，通过top、right、bottom和left属性来调整元素的位置。示例代码如下：

<div class="d2e5-6ccf-ed69-a2bb box">Relative</div>
<style>
.box {
  position: relative;
  width: 200px;
  height: 200px;
  background-color: blue;
  top: 50px;
  left: 50px;
}
</style>

3、absolute：元素相对于其最近的非static定位的父元素进行定位，如果没有非static定位的父元素，则相对于body元素进行定位。示例代码如下：

<div class="ed69-a2bb-4a95-a408 container">
  <div class="a2bb-4a95-a408-2c09 box">Absolute</div>
</div>
<style>
.container {
  position: relative;
  width: 400px;
  height: 400px;
  background-color: gray;
}
.box {
  position: absolute;
  width: 200px;
  height: 200px;
  background-color: yellow;
  top: 50px;
  left: 50px;
}
</style>

4、fixed：元素相对于浏览器窗口进行定位，不会随着滚动而改变位置。示例代码如下：

<div class="a408-2c09-094b-6525 box">Fixed</div>
<style>
.box {
  position: fixed;
  width: 200px;
  height: 200px;
  background-color: green;
  top: 50px;
  left: 50px;
}
</style>

CSS中的float属性用于指定元素在文档中的浮动方式。float属性有三个值：left、right和none。

1、left：元素向左浮动，其他元素会围绕它排列。示例代码如下：

<div class="094b-6525-aaeb-c1cd box1">Left</div>
<div class="6525-aaeb-c1cd-c923 box2">Float None</div>
<style>
.box1 {
  float: left;
  width: 200px;
  height: 200px;
  background-color: pink;
}
.box2 {
  float: none;
  width: 200px;
  height: 200px;
  background-color: orange;
}
</style>

2、right：元素向右浮动，其他元素会围绕它排列。示例代码如下：

<div class="c1cd-c923-aa26-d0e3 box1">Right</div>
<div class="c923-aa26-d0e3-d094 box2">Float None</div>
<style>
.box1 {
  float: right;
  width: 200px;
  height: 200px;
  background-color: purple;
}
.box2 {
  float: none;
  width: 200px;
  height: 200px;
  background-color: cyan;
}
</style>

3、none：元素不浮动，按照正常文档流进行排列。示例代码如下：

<div class="8e01-1525-d2e5-6ccf box1">Float Left</div>
<div class="1525-d2e5-6ccf-ed69 box2">Float Right</div>
<div class="d2e5-6ccf-ed69-a2bb box3">Float None</div>
<style>
.box1 {
  float: left;
  width: 200px;
  height: 200px;
  background-color: pink;
}
.box2 {
  float: right;
  width: 200px;
  height: 200px;
  background-color: purple;
}
.box3 {
  float: none;
  width: 200px;
  height: 200px;
  background-color: cyan;
}
</style>

需要注意的是，浮动元素会脱离正常文档流，所以可能会导致其他元素的位置错乱。为了解决这个问题，可以使用clear属性来清除浮动。

position属性用于指定元素的定位方式，包括static、relative、absolute和fixed。float属性用于指定元素的浮动方式，包括left、right和none。这些属性可以帮助我们实现各种布局效果，但需要注意使用时可能会对其他元素造成影响，需要合理使用clear属性进行处理。