CSS Part3（浮动与定位）

heyunh

已于 2022-04-22 10:24:11 修改

阅读量170

点赞数

文章标签：前端 css css3

于 2022-04-21 11:50:01 首次发布

本文链接：https://blog.youkuaiyun.com/Miratowa_/article/details/124293899

版权

本文详细介绍了CSS中的浮动(float)和定位(position)，包括浮动的四种影响及清除方法，以及定位的五种模式和z-index概念。通过实例展示了如何利用display属性转换元素类型，以及如何解决浮动造成的父元素高度塌陷问题。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

一、类型转换

之前的章节我们介绍过盒子的类型：块级元素、行内元素、行内块元素。如果这些元素的类型可以相互转换，就可以极大的便利我们网页的布局，所以听你们直接是如何转换的呢？

1.三种类型的比较

①块级元素block

块级元素的特点：

在一行显示；
宽度是父级元素的百分之百；
可以设置高宽、行高、内外边距；
可以包含其他内联元素和块元素。

常见的块级元素：
div、dl、ol、ul、li、p、hr、h1-h6、table、form······

②行内元素inline

行内元素的特点：

和其他元素在一行上显示，遇到父元素边框会自动换行；
不可以直接设置高宽外边距，宽度和内容一样宽；
设置宽度width无效，设置高度无效，可以通过设置line-height来设置，设置margin只有左右有效，上下无效，设置padding只有左右有效，上下无效。

常见的行内元素：
a、em、i、img、input、span、strong、text-area、sub、sup·······

③行内块元素inline-block

行内块元素的特点：

元素排列在一行；
宽度默认由内容决定；
元素间默认有间距；
支持宽高、外边距、内边距的所有样式的设置。

2.display属性

display属性可以设置一个元素应如何显示。他有以下值：

值	解释
none	元素不显示在网页中，不占用原本的空间
block	转换为块级元素，一行只能显示一个块级元素
inline	转换为行内元素，一行可以显示多个
inline-block	转换为行内块元素，可以设置宽高、内外边距

导航栏案例

<head>
<style>
        * {
        /*清除内外边距*/
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }
        div {
        /*块级元素，宽度默认是浏览器的宽度*/
            height: 40px;
            background-color: #ccc;
            text-align: center;
        }
        ul li {
            display: inline-block;
            /*使li在一行上显示*/
        }
        ul li a {
            display: inline-block;
            width: 100px;
            height: 100%;
            line-height: 40px;/*使文字垂直居中*/
            color: black;
            text-decoration: none;
        }
        li a:hover {
            background-color: rgb(119, 116, 116);
        }
    </style>
</head>
<body>
    <div>
        <ul>
            <li><a href="">首页</a></li>
            <li><a href="">服务</a></li>
            <li><a href="">咨询</a></li>
            <li><a href="">门店</a></li>
        </ul>
    </div>
</body>

效果图：
在这里插入图片描述
注意：
1.<li>本来是块级元素，需要把它放在同一行上显示的话，就需要把它转换成行内元素或行内块元素；
2.<a>本来是行内元素，不可以设置宽高，但如果把它转换为行内块元素就可以设置宽高等属性-------使鼠标经过整个区域都可以点击链接；
3.虽然这里没有给<li>设置宽高，但是由于它的子元素<a>设置了宽高，所以，<a>会撑大它的父级元素<li>，此时它们两的大小是一样的。

二、浮动float

1.浮动的概念

再讲浮动之前，我们需要知道文档标准流的概念，所谓标准流，就是符合标准的流式布局--------也就是每个元素会严格遵守自己的特性在网页上摆放，比如块级元素就只能一个独占一行。

有了标准流的概念，我们就可以很好的解释浮动是什么？

浮动就是使原先的元素脱离标准流的束缚，浮动起来在网页上进行摆放，它最大的作用---------就是可以使添加了浮动的块级元素拥有行内块元素的特性，可以一行显示多个并设置宽高等属性。

比如上面的导航栏案例中使每个<li>摆放在一行中，除了可以给它转换类型外，还可以给它添加浮动，所实现的效果是一样的。

2.浮动float属性的值

none （默认值）元素不浮动
left 元素向左浮动（盒子从最左边开始摆放）
right 元素向右移动（盒子从最右边开始摆放）

浮动案例：

<head>
<style>
        div {
            float: left;
            width: 200px;
            height: 200px;
            margin: 10px;
            background-color: pink;
        }
    </style>
</head>
<body>
    <div></div>
    <div></div>
    <div></div>
    <div></div>

效果图：
在这里插入图片描述
此案例就实现了四个块级元素<div>在同一行显示。

3.浮动的影响

虽然浮动给我们带来了便利，但是它也存在这一些影响。

①浮动元素上一行是行内元素

此时浮动元素会上移，行内元素会围绕着浮动元素摆放。

<head>
<style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }
        div {
            float: left;
            width: 200px;
            height: 200px;
            margin: 10px;
            background-color: pink;
        }
        span {
            background-color: #ccc;
        }
    </style>
</head>
<body>
    <span>这是一个行内元素，它在浮动元素的上一行</span>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
</body>

在这里插入图片描述

②浮动元素下一行是行内元素

<body>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <span>这是一个行内元素，它在浮动元素的下一行</span>
</body>

这种情况和第一种情况效果相同。

③浮动元素下一行是块级元素

此时块级元素会上移，被浮动元素压在下面，但块级元素的内容会围绕浮动元素。

<head>
<style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }
        div {
            float: left;
            width: 200px;
            height: 200px;
            margin: 10px;
            background-color: pink;
        }
        .p1 {
            background-color: #ccc;
        }
    </style>
</head>
<body>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <p class="p1">123456</p>
</body>

效果图：
在这里插入图片描述

④浮动会造成父元素高度塌陷

在标准流中，子元素的大小会撑开父元素，使父元素和子元素一样大，但是如果给子元素添加了浮动，父元素就不会被撑开（即父亲的高度为0），这种情况就叫做高度塌陷。

高度塌陷会导致父元素的背景颜色无法显示（因为此时父元素没有被撑开，它的高度为0）、会影响后面的标准流上移、会导致外边距垂直重叠等问题。

<head>
<style>
        * {
            margin: 0;
            padding: 0;
        }
        .box1 {
            background-color: #00f;
            border: 2px solid #0f0;
        }
        .box2 {
            float: left;
            width: 100px;
            height: 100px;
            background-color: #f00;
        }
    </style>
</head>
<body>
    <div class="box1">
        <div class="box2"></div>
    </div>
</body>

在这里插入图片描述
这个案例中的子元素就没有把父元素撑开，导致高度塌陷，背景颜色不显示。

4.解决浮动造成的影响（清除浮动）

①给父元素手动添加合适的高度

只要手动给父元素添加合适的高度，就不需要依靠子元素撑大父元素。

<head>
<style>
        * {
            margin: 0;
            padding: 0;
        }
        .box1 {
            height: 100px;
            background-color: #00f;
            border: 2px solid #0f0;
        }
        .box2 {
            float: left;
            width: 100px;
            height: 100px;
            background-color: #f00;
        }
    </style>
</head>
<body>
    <div class="box1">
        <div class="box2"></div>
    </div>
</body>

在这里插入图片描述
但是实际的开发中，我们一般不会把父元素的高度写死，这对后面的改动和维护极不方便，所以我们更推荐下面的解决方法。

②额外标签清除浮动

在最后一个浮动标签后，新加一个标签，给其设置clear属性

clear 属性指定元素两侧不能出现浮动元素。

clear：left 在左侧不允许浮动元素；
clear：right 在右侧不允许浮动元素；
clear：both 在两侧不允许浮动元素。

<head>
<style>
        * {
            margin: 0;
            padding: 0;
        }
        .box1 {
            background-color: #00f;
            border: 2px solid #0f0;
            /* overflow: hidden; */
        }
        .box2 {
            float: left;
            width: 100px;
            height: 100px;
            background-color: #f00;
        }
        .box3 {
            clear: both;
        }
    </style>
</head>
<body>
    <div class="box1">
        <div class="box2"></div>
        <div class="box3"></div>
    </div>
</body>

③父元素添加overflow:hidden

<head>
<style>
        * {
            margin: 0;
            padding: 0;
        }
        .box1 {
            background-color: #00f;
            border: 2px solid #0f0;
            overflow: hidden;
        }
        .box2 {
            float: left;
            width: 100px;
            height: 100px;
            background-color: #f00;
        }
    </style>
</head>
<body>
    <div class="box1">
        <div class="box2"></div>
    </div>
</body>
</html>

在这里插入图片描述

④使用after伪元素清除浮动

<head>
<style>
        * {
            margin: 0;
            padding: 0;
        }
        .box1 {
            background-color: #00f;
            border: 2px solid #0f0;
            *zoom: 1;
        }
        .box1::after {
            content: "";
            display: block;
            height: 0;
            clear:both;
            visibility: hidden;

        }
        .box2 {
            float: left;
            width: 100px;
            height: 100px;
            background-color: #f00;
        }
    </style>
</head>
<body>
    <div class="box1">
        <div class="box2"></div>
    </div>
</body>

⑤使用before和after双伪元素清除浮动

<style>
.box1:after,.clearfix:before{
    content: "";
    display: table;
    }
    .box1:after{
        clear: both;
    }
    .box1{
        *zoom: 1;
    }
</style>

三、定位position

定位就是指可以把盒子摆放在任意想摆放的位置，它可以压住其他盒子。

定位position有五个值：

static -------静态定位，即无定位；
relative --------相对定位（相对原位置）
fixed --------固定定位（不随浏览器滚动而滚动）
absolute --------绝对定位（以相对定位为标准进行定位）
sticky --------粘性定位

给元素添加了定位属性后，就可以继续添加四个方位属性：top、left、right、bottom。

①position的值

1.static -------静态定位

遵循正常的文档流对象。

静态定位的元素不会受到 top, bottom, left, right影响。

2.relative --------相对定位

相对定位元素的定位是相对其原来位置。

<head>
<style>
        div {
            width: 100px;
            height: 100px;
            background-color: #ccc;
            position: relative;
            top: 100px;
            left: 100px;
        }
    </style>
</head>
<body>
    <div></div>
</body>

在这里插入图片描述
图中1是原来的位置，2是定位过后的位置。
所以：
left: 100px；就是远离左边界100px
top: 100px;就是远离上边界100px

3.absolute --------绝对定位

添加绝对定位的元素的父元素一般要添加相对定位，此时该元素就以它的父元素的边界为标准进行定位。

<head>
<style>
        .father {
            position: relative;
            width: 300px;
            height: 300px;
            border: 1px solid black;
            margin: 0 auto;
        }
        .son {
            position: absolute;
            top: 100px;
            right: 100px;
            width: 100px;
            height: 100px;
            background-color: pink;
        }
    </style>
</head>
<body>
    <div class="father">
        <div class="son"></div>
    </div>
</body>

在这里插入图片描述
子元素绝对定位，父元素相对定位，子元素会沿着父元素的边界进行定位；如果此时没有给父元素添加相对定位，子元素就会根据浏览器的边界进行定位。

4.fixed --------固定定位（不随浏览器滚动而滚动）

添加了固定定位的元素的位置相对于浏览器窗口是固定位置。
它脱离了标准流，因此不占位置，它始终固定在浏览器窗口的某个位置，不随页面滚动而滚动。

5.sticky --------粘性定位

它基于用户的滚动位置来定位。
添加了粘性定位的元素是依赖于用户的滚动，在 position:relative 与 position:fixed 定位之间切换。
起初时它的行为就像 position:relative; 而当页面滚动超出目标区域时，它的表现就像 position:fixed;，它会固定在目标位置。

②z-index的概念

元素的定位与文档流无关，所以它们可以覆盖页面上的其它元素，但是那些元素是我们想要优先显示的呢，这时我们就引出了z-index的概念。

z-index属性可以指定一个元素的堆叠顺序（哪个元素应该放在前面，或后面）

一个元素可以有正数或负数的z-index值。
元素的z-index值越大，该元素显示优先级越高。

<style>
img
{
	position:absolute;
	left:0px;
	top:0px;
	z-index:-1;
}
</style>
</head>

<body>
<h1>This is a heading</h1>
<img src="w3css.gif" width="100" height="140" />
<p>因为图像元素设置了 z-index 属性值为 -1, 所以它会显示在文字之后。</p>
</body>