欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识！
您现在的位置是： 首页

css之float和position的微小区别

程序员文章站 2022-03-02 15:40:25
...

float和position都可以利用浮动对元素进行定位，但是有一点微小的区别

Position使元素完全脱离文档流

float使元素半脱离文档流

什么意思？

看下面的例子

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>floatTest</title>
    <style type="text/css">
        .class1{
            height: 100px;
            border: 1px solid black;
            position: absolute;
        }
        .class2{
            height: 100px;
            border: 1px solid red;
            width: 100px;
        }
    </style>
</head>
<body>
<div class="class1">
    我是class1
</div>
<p class="class2">
这是float的测试局
</p>
</body>
</html>

效果图：

css之float和position的微小区别

可以看到，class2中的文字都已经占据class1的位置

使用float

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>floatTest</title>
    <style type="text/css">
        .class1{
            height: 100px;
            border: 1px solid black;
            float: left;
        }
        .class2{
            height: 100px;
            border: 1px solid red;
            width: 100px;
        }
    </style>
</head>
<body>
<div class="class1">
    我是class1
</div>
<p class="class2">
这是float的测试局
</p>
</body>
</html>

效果图

css之float和position的微小区别

class2中的文字为class1的文字让出了位置。可见，虽然float也脱离了文档流，但是文本依然会为这个元素让出位置，环绕在周围。最经典的就是float完成图片文字环绕效果。

相关标签： 前端入门项目

上一篇： JPA 和 Spring Data JPA

下一篇： 2010.04.08———cannot simultaneously fetch multiple bags异常

推荐阅读