css中position用法_css position float

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

1. static：静态定位，元素按照正常的文档流进行布局，默认值。静态定位的元素不受top、bottom、left、right等属性的影响，无法通过z-index属性进行层叠。

2. relative：相对定位，元素相对于其正常位置进行定位。通过设置top、bottom、left、right属性可以改变元素的位置。相对定位的元素仍然占据其原来的空间，周围的元素不会调整位置。

示例代码：

<style>
    .box {
        position: relative;
        left: 50px;
        top: 50px;
    }
</style>
<div class="4a4d-dad1-b2a2-250b box">
    相对定位的元素
</div>

3. absolute：绝对定位，元素相对于其最近的非static定位的父元素进行定位，如果没有非static定位的父元素，则相对于body进行定位。通过设置top、bottom、left、right属性可以改变元素的位置。绝对定位的元素脱离了文档流，不占据原来的空间，周围的元素会调整位置。

示例代码：

<style>
    .box {
        position: absolute;
        top: 50px;
        left: 50px;
    }
</style>
<div class="b2a2-250b-fb2f-e972 box">
    绝对定位的元素
</div>

4. fixed：固定定位，元素相对于浏览器窗口进行定位，不随页面滚动而改变位置。通过设置top、bottom、left、right属性可以改变元素的位置。固定定位的元素脱离了文档流，不占据原来的空间。

示例代码：

<style>
    .box {
        position: fixed;
        top: 50px;
        left: 50px;
    }
</style>
<div class="fb2f-e972-d497-7c43 box">
    固定定位的元素
</div>

除了position属性，CSS中还有float属性用于设置元素的浮动方式。

float属性有三个值可选：none、left和right。

1. none：默认值，元素不浮动，按照正常的文档流进行布局。

2. left：元素向左浮动，周围的元素会围绕在其右侧。如果左浮动的元素高度超过了其容器的高度，容器的高度将不会自动调整。

示例代码：

<style>
    .box {
        float: left;
        width: 100px;
        height: 100px;
        background-color: red;
    }
</style>
<div class="d497-7c43-821a-c0c3 box"></div>

3. right：元素向右浮动，周围的元素会围绕在其左侧。如果右浮动的元素高度超过了其容器的高度，容器的高度将不会自动调整。

示例代码：

<style>
    .box {
        float: right;
        width: 100px;
        height: 100px;
        background-color: red;
    }
</style>
<div class="821a-c0c3-2bf8-f5a2 box"></div>

浮动元素会脱离文档流，可以通过clear属性来清除浮动对其他元素的影响。clear属性有四个值可选：none、left、right和both。

- none：默认值，元素不清除浮动。

- left：元素不允许左浮动的元素在其左侧浮动。

- right：元素不允许右浮动的元素在其右侧浮动。

- both：元素不允许任何浮动的元素在其两侧浮动。

示例代码：

<style>
    .clearfix::after {
        content: "";
        display: table;
        clear: both;
    }
    .left {
        float: left;
        width: 100px;
        height: 100px;
        background-color: red;
    }
    .right {
        float: right;
        width: 100px;
        height: 100px;
        background-color: blue;
    }
</style>
<div class="2bf8-f5a2-eb2d-425f clearfix">
    <div class="f5a2-eb2d-425f-799f left"></div>
    <div class="eb2d-425f-799f-f3de right"></div>
</div>

以上就是position和float在CSS中的用法。通过设置position属性可以改变元素的定位方式，而float属性可以设置元素的浮动方式。这些属性在页面布局中非常常用，可以帮助我们实现各种复杂的布局效果。