CSS学习第三天：布局之浮动、定位

原创于 2024-12-05 15:28:13 发布 · 1.8k 阅读

51 ·

本内容遵循CC 4.0 BY-SA版权协议

标签

#css #学习 #前端

前端学习--从入门到放弃专栏收录该内容

15 篇文章

订阅专栏

布局之浮动、定位

float、position布局
什么是浮动
什么是定位
什么是文档流
元素浮动后的特点
清除浮动

float、position布局

块级元素、行内元素、行内块元素，这三种元素类型有自己的排列规则。

但是这种排列规则是无法满足我们复杂的页面布局要求的。于是就出现了各种布局技术。

float、position布局，或者说叫浮动定位布局，就是一种比较古早时期的布局方案。

什么是浮动

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>浮动</title>
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <style>
        div {
            width: 200px;
            height: 200px;
        }
        #app1 {
            background-color: aqua;
        }

        #app2 {
            background-color: pink;
        }
    </style>
</head>
<body>
<div id="app1">app1</div>
<div id="app2">app2</div>
</body>
</html>

在这里插入图片描述

通过前面对块级元素特性的学习，我们可以看到上述排列结果

如果我们想要让他们左右排列在一行该怎么弄呢？

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>浮动</title>
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <style>

        #app1 {
            border: 10px solid red;
            width: 300px;
            height: 300px;
            background-color: aqua;
            float: left;
        }

        #app2 {
            border: 10px solid yellow;
            width: 300px;
            height: 300px;
            background-color: pink;
            float: left;
        }
    </style>
</head>
<body>
<div id="app1"><span>app1</span></div>
<div id="app2">
    <app2>app2</app2>
</div>
</body>
</html>

在这里插入图片描述
一旦设置了float，元素就脱离了原本的文档，“浮”了起来

当我们仅对app1设置float的话
在这里插入图片描述
会发现app2的框框不见了、这是因为app1浮了起来，app2就感受不到app1的存在了，就排到了原本app1的位置

（为什么app2这个文字还在呢？后面讲到元素浮动后的特性时会讲到）

要想达到挨在一起的效果，让他俩都左浮动即可

    <style>

        #app1 {
            border: 10px solid red;
            width: 300px;
            height: 300px;
            background-color: aqua;
            float: left;
            clear: both;
        }

        #app2 {
            border: 10px solid yellow;
            width: 300px;
            height: 300px;
            background-color: pink;
            float: left;
        }
    </style>

在这里插入图片描述

简单来说，浮动，就是将元素脱离原本的文档流，浮起来，按照设置的值进行浮动

元素本来在一个位置，加一个浮动它就会想云一样飘浮起来。进而移动到指定的位置。需要记住的是，如果元素或者盒子添加了浮动就不再占有本来的位置了。

float的几种设置值

float: none; //默认值，元素不浮动

float: left; //元素向左浮动

float: right; //元素向右浮动

为什么要浮动

主要作用就是让多个块级盒子在一行显示，如果是转换为行内快元素的话，可以将块级元素一行展示，但是中间有一个不可避免的缝隙。所以使用浮动是比较合理的。

什么是定位

相当于指定元素坐标

案例说明

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>浮动</title>
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <style>

        * {
            margin: 0;
            padding: 0;
        }

        #app1 {
            border: 10px solid red;
            width: 300px;
            height: 300px;
            background-color: aqua;
            float: left;
            clear: both;
        }

        #app2 {
            border: 10px solid yellow;
            width: 300px;
            height: 300px;
            background-color: pink;
            position: absolute; 设置绝对定位
            top: 0px;  距离上方
            left: 320px;  举例左侧
        }
    </style>
</head>
<body>
<div>
    <div id="app1"><span>app1</span></div>
    <div id="app2">
        <app2>app2</app2>
    </div>
</div>

</body>
</html>

在这里插入图片描述
我们的app2没有浮动，但是也实现了在一行展示两个块级元素的效果。

不过我们得知道，本质上是不一样的。float后的两个元素相互挤占在同一层

一个float，一个position，则仍旧是在两层。只不过俯视看上去，而已

position的配置值有

值	描述
absolute	生成绝对定位的元素，相对于 static 定位以外的第一个父元素进行定位。元素的位置通过 “left”, “top”, “right” 以及 “bottom” 属性进行规定。
fixed	生成固定定位的元素，相对于浏览器窗口进行定位。元素的位置通过 “left”, “top”, “right” 以及 “bottom” 属性进行规定。
relative	生成相对定位的元素，相对于其正常位置进行定位。因此，“left:20” 会向元素的 LEFT 位置添加 20 像素。
static	默认值。没有定位，元素出现在正常的流中（忽略 top, bottom, left, right 或者 z-index 声明）。
sticky	粘性定位，该定位基于用户滚动的位置。它的行为就像 position:relative; 而当页面滚动超出目标区域时，它的表现就像 position:fixed;，它会固定在目标位置。注意:Internet Explorer, Edge 15 及更早 IE 版本不支持 sticky 定位。 Safari 需要使用 -webkit- prefix (查看以下实例)。
inherit	规定应该从父元素继承 position 属性的值。
initial	设置该属性为默认值，详情查看 CSS initial 关键字。

static: 默认值，意思是有关元素将按照它们在标记里出现的先后顺序出现在浏览器窗口里。

relative: 与 static 相似，区别是 position 属性等于 relative 的元素还可以（通过应用 float 属性等)从文档的正常显示顺序里脱离出来。

absolute: 可以将设置的元素摆放到容纳它的“容器”的任何位置，这个容器要么是文档本身，要么是一个有着 fixed 或 absolute 属性的父元素。这个元素在原始标记里出现的位置与它的显示位置无关，因为它的显示位置由 top、left、right 和 bottom 等属性决定，可以用像素或百分比作为单位设置这些属性的值。

absolute和relative的区别

absoleute绝对定位的意思是说，它的定位不受父元素中其他元素的影响

relative相对定位，就是会受到父元素中其他元素影响

什么是文档流

在介绍浮动和定位的时候，我们都说到了脱离文档流，那么什么是文档流呢？

我们简单理解为网页的最底层的布局就行。所谓脱离文档流，就是把最底层的布局元素进行上浮。

目前能够脱离文档流的方式有：float；position的absolute和fixed定位。即

绝对定位 (absolute)
固定定位 (fixed)
浮动 (float)

元素浮动后的特点

浮动元素会脱离文档流，不再占据文档流空间
浮动元素彼此之间是从左往右排列，宽度超过一行自动换行

浮动的元素如果父级装不下的话，多余的盒子会另起一行对齐

在浮动元素前面元素不浮动时，浮动元素无法上移
块级元素和行内元素浮动之后都变成行内块级元素
浮动元素不会盖住文字，可以设置文字环绕效果
浮动只会影响当前以及后面的标准盒子，不影响前面的标准流。

相当于如果第一个盒子不浮动的话，那么后续的盒子浮动就会顶着第一个盒子

清除浮动

清除浮动主要是为了解决，父元素因为子级元素浮动引起的内部高度为0的问题。

代码说明

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        #father {
            margin-bottom: 10px;
            border: 10px solid #ff313e;
        }

        #father div {
            width: 200px;
            height: 200px;
            border: 5px solid #000;
        }
    </style>
</head>
<body>
<div id="father">
    <div>app1</div>
    <div>app2</div>
</div>
</body>
</html>

在这里插入图片描述
一旦我们为app1、app2设置了浮动，就变成了

子元素浮起来后，父元素感受不到子元素的存在，就塌陷了

什么时候要清除浮动
- 父级没高度了
- 子盒子浮动了
- 浮动之后影响下面的布局了以上这些情况都需要清除浮动

如何清除浮动

// 在父元素中添加 伪类元素清除浮动
.clearfix:after {
    content: "";
    display: block;
    height: 0;
    visibility: hidden;
    clear: both;
}

清除浮动之后，父级就会根据浮动的盒子自动检测高度，父级有了高度就不会影响下面的标准流了。

对于本案例中，就这么干

        /*在父元素中添加 伪类元素清除浮动*/
        #father:after {
            content: "";
            display: block;
            height: 0;
            visibility: hidden;
            clear: both;
        }