CSS文档流——position，float属性详解

A small mouse

已于 2022-06-13 10:09:09 修改

阅读量800

点赞数 2

分类专栏：前端文章标签： css html 前端

于 2022-06-08 19:13:05 首次发布

本文链接：https://blog.csdn.net/m0_67623521/article/details/125173222

版权

前端专栏收录该内容

2 篇文章 0 订阅

订阅专栏

一、文档流是什么

由于之前思否社区写的文章，我的主页：夨落旳尐孩的文章 - SegmentFault 思否

所以这篇文章就直接从CSS文档流开始讲了，如果文章里面有不懂的内容，可以去看我的思否主页，里面有HTML和CSS基础的相关知识，欢迎大家前去访问😁。

文档流就是页面的布局中各个元素的先后顺序，正常的文档流就是将页面的每一行布满：块元素独占一行、行内元素从左至右排满一行。比如：div、hr、p等都是块元素，它们会把一行都直接占满，即使没有到达一行，img、span等就是行内元素，一般情况就会从左至右排列。

二、脱离文档流

文档流的一般情况可能不满足我们的设计需求，可以使用不同的布局方式来改变顺序，当前主要的布局方式有：浮动布局(Float)、定位布局(Position)、弹性布局(Flex)、网格布局(Grid)等来改变正常的文档流。

1、设置浮动（float）

float的几个属性介绍：

left   表明元素必须浮动在其所在的块容器左侧的关键字。
right   表明元素必须浮动在其所在的块容器右侧的关键字。
none   表明元素不进行浮动的关键字。
inline-start   关键字，表明元素必须浮动在其所在块容器的开始一侧，在 ltr 脚本中是左侧，在 rtl 脚本中是右侧。
inline-end   关键字，表明元素必须浮动在其所在块容器的结束一侧，在 ltr 脚本中是右侧，在 rtl 脚本中是左侧。
示例：

html：

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>position 定位</title>
    <link rel="stylesheet" type="text/css" href="./out.css">
</head>
<body>
    <div id="father">
        <div id="son1">son1</div>
        <div id="son2">son2</div>
        <div id="son3">son3</div>
    </div>
</body>
</html>

css：（与html元素在同一级文件夹下面）

div{
    width:200px;
    height:200px;
    border: 2px solid black;
    float:left;
}
div #son1{
    width:40px;
    height:40px;
    background:burlywood;
    float: right;
}
div #son2{
    width:40px;
    height: 40px;
    background: red;
    /* position:relative; */
    /* float:left; */
    top: 44px;
    left: 20px;
}
div #son3{
    width: 40px;;
    height:40px;
    /* position: fixed; */
    background:yellow;
}

显示效果：

发现在father中的块son1在其父级空间width:200px; height:200px;内是靠右边布局的，而son2，son3在其父级空间width:200px; height:200px;内是靠左边布局的，可以理解成将三个儿子块变为了行内元素。

注意：我这里只设置了父亲的float属性，son1是自己设置的float属性，所以是靠右边布局，son2，son3儿子都是继承于父亲的，所以他们都是靠左，父亲设置的是相对于整个浏览器窗口的。

float的清除方式clear，clear也有几个常见属性：

left	在左侧不允许浮动元素
right	在右侧不允许浮动元素
both	在左右两侧均不允许浮动元素
inherit	规定应该从父元素中继承 clear 属性值
none	默认值。允许浮动元素出现在两侧

没有清除的示例：

html:

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>position 定位</title>
    <link rel="stylesheet" type="text/css" href="./out.css">
</head>
<body>
    <div id="father">
        <div id="son1">son1</div>
        <div id="son2">son2</div>
        <div id="son3">son3</div>
        <p>阿Ｑ要画圆圈了，那手捏着笔却只是抖。于是那人替他将纸铺在地上，阿Ｑ伏下去，使尽了平生的力气画圆圈。
            他生怕被人笑话，立志要画得圆，但这可恶的笔不但很沉重，并且不听话，刚刚一抖一抖的几乎要合缝，
            却又向外一耸，画成瓜子模样了。
            阿Ｑ正羞愧自己画得不圆，那人却不计较，早已掣了纸笔去，许多人又将他第二次抓进栅栏门。
        </p>
    </div>
</body>
</html>

CSS:

div{
    width:750px;
    height:200px;
    border: 2px solid black;
    float:left;
}
div #son1{
    width:40px;
    height:40px;
    background:burlywood;
    float: right;
}
div #son2{
    width:40px;
    height: 40px;
    background: red;
    /* position:relative; */
    /* float:left; */
    top: 44px;
    left: 20px;
}
div #son3{
    width: 40px;;
    height:40px;
    /* position: fixed; */
    background:yellow;
}

显示效果：

清除的示例：

在CSS文件中加入以下代码：（清除左侧的浮动，由于右侧的浮动与左侧的高度一致，所以右侧的浮动也一起消失了）

div p{
    clear:left;
}

效果：

我将son1的高度改为60px，会发现left的只消除了左侧的浮动：

效果：

注：float设置的初衷只是为了实现文字环绕图片，而不是用来布局的。

2、设置定位（position）

position属性：

1、static：默认值，相当于是正常的文档流，但是会忽略top、bottom、left、right，意思就是将前面元素的这些属性忽略，但是保留了width，height）

示例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>change-to-flex</title>
    <style type="text/css">
        .block {
            position: relative;
            top:10px;
            left:20px;
            width: 50px;
            height: 50px;
            line-height: 50px;
            text-align: center;
            border: 2px solid blue;
            /* box-sizing: border-box; */
        }
        .block:nth-child(2){
            position: static;  /*忽略 top 属性*/
            border-color:red;
        }
        .block:nth-child(3){
            position: static;
            border-width: 3px;
            border-color:pink;
        }
    </style>
</head>
<body>
    <div class="block">
        A
    </div>
    <div class="block">
        B
    </div>
    <div class="block">
        C
    </div>
    <div class="block">
        D
    </div>
</body>
</html>

实现效果：

说明： B、C两块忽略了前面设置的top和left。

2、relative：生成相对自己原来的位置定位的元素，通过top,bottom,left,right的设置相对于其正常（原先本身）位置进行定位。

示例：

html：

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>position 定位</title>
    <link rel="stylesheet" type="text/css" href="./out.css">
</head>
<body>
    <div id="father">
        <div id="son1">son1</div>
        <div id="son2">son2</div>
        <div id="son3">son3</div>
    </div>
</body>
</html>

CSS：

div{
    width:200px;
    height:200px;
    border: 2px solid black;
    
}
div #son1{
    width:40px;
    height:60px;
    background:burlywood;
    position:relative;
    top:10px;
    left:20px;
}
div #son2{
    width:40px;
    height: 40px;
    background: red;
    top:20px;
}
div #son3{
    width: 40px;;
    height:40px;
    background:yellow;
}

效果：

3、absolute：与relative属性不同的是，它是相对于父亲设置的位置偏移，然后使用它还有要注意的地方：1、设定TRBL，2、父级设定Position属性，这样可以保证在使用absolute定位的时候不会因为分辨率的问题发生错位。

示例：

html：

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>position 定位</title>
    <link rel="stylesheet" type="text/css" href="./out.css">
</head>
<body>
    <div id="father">
        <div id="son1">son1</div>
        <div id="son2">son2</div>
        <div id="son3">son3</div>
    </div>
</body>
</html>

CSS：

div{
    width:200px;
    height:200px;
    border: 2px solid black;
    position: relative;
}
div #son1{
    width:50px;
    height:60px;
    background:burlywood;
    position:absolute;
    top:30px;
    left:20px;
}
div #son2{
    width:40px;
    height: 40px;
    background: red;
}
div #son3{
    width: 40px;;
    height:40px;
    background:yellow;
}

效果：

4、fixed： 设置绝对定位，翻译：固定的，可以根据这个翻译来记忆，它是相对于浏览器窗口来定位的。

5、sticky：黏贴定位，relative和fixed的完美结合（这个地方我不能理解是为什么，因为我设置的时候的效果是和relative的一样的效果，希望有人可以帮我在评论区贴出答案😁）

写在最后

以上就是我看完参考文献的记录，为自己以后复习有个参照物😁。有错误的话欢迎在评论区指出。

参考文献：

深入理解css之float - SegmentFault 思否

CSS 布局 position 详解_姜皓的博客-CSDN博客

A small mouse

关注

2
点赞
踩
4

收藏

觉得还不错? 一键收藏
0
评论
CSS文档流——position，float属性详解

文档流的一般情况可能不满足我们的设计需求，可以使用不同的布局方式来改变顺序，当前主要的布局方式有：浮动布局(Float)、定位布局(Position)、弹性布局(Flex)、网格布局(Grid)等来改变正常的文档流。......
复制链接

扫一扫