浮动

最新推荐文章于 2024-07-18 22:26:13 发布

hello_xujj

最新推荐文章于 2024-07-18 22:26:13 发布

阅读量89

点赞数

分类专栏： CSS 文章标签： css css3

本文链接：https://blog.csdn.net/xjj19999272/article/details/116519789

版权

CSS 专栏收录该内容

18 篇文章 1 订阅

订阅专栏

本文详细介绍了CSS浮动的概念和用法，包括浮动如何使元素并排显示，浮动顺序贴靠特性，以及浮动元素的宽高设置。通过实例代码展示了左浮动和右浮动的效果，强调了浮动在文档布局中的重要性。同时，提到了浮动可能导致的父元素高度塌陷问题及其解决方案。

摘要由CSDN通过智能技术生成

浮动

浮动的概念

浮动在文档布局中是一个非常重要的概念，它描述一个元素浮动至某一侧并停下的表现方式。CSS 允许浮动任何元素。

浮动元素会脱离网页文档，与其他元素发生重叠，但不会与文字内容发生重叠。

浮动的使用

浮动的最本质功能是用来实现并排，示例代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .box {
            width: 600px;
            height: 200px;
            border: 1px solid #000;
        }
        .box .c1 {
            width: 200px;
            height: 200px;
            background-color: orange;
            float: left;
        }
        .box .c2 {
            width: 200px;
            height: 200px;
            background-color: green;
            float: left;
        }
        .box .c3 {
            width: 200px;
            height: 200px;
            background-color: blue;
            float: left;
        }
    </style>
</head>
<body>
    <div class="box">
        <div class="c1"></div>
        <div class="c2"></div>
        <div class="c3"></div>
    </div>
</body>
</html>

在上面代码中，设置一个父盒子和三个子盒子，然后设置了float: left;浮动，没有设置浮动前和设置浮动后的网页效果是这样的：

在这里插入图片描述

可以看到浮动实现了最本质的功能也就是并排。

浮动使用要点：要浮动，并排的盒子都要设置浮动。

父盒子要有足够的宽度，否则子盒子会掉下去，比如把上面父盒子的宽度设置为500px，网页效果如下：
在这里插入图片描述

浮动的顺序贴靠特性

子盒子会按顺序进行贴靠，如果没有足够空间，则会寻找再前一个兄弟元素。示例代码如下：

<style>
    .box{
        width: 250px;
        height: 100px;
        border: 1px solid #000;
    }
    .box .c1 {
        width: 150px;
        height: 100px;
        background-color: orange;
        float: left;
    }
    .box .c2 {
        width: 100px;
        height: 50px;
        background-color: green;
        float: left;
    }
    .box .c3 {
        width: 100px;
        height: 50px;
        background-color: blue;
        float: left;
    }
</style>

在上述代码中box是父盒子，c1、c2、c3是三个子盒子，当蓝色的c3子盒子没有足够的空间像c2贴靠时，它会寻找再前一个兄弟元素c1，网页效果如下：

在这里插入图片描述

浮动的元素一定能设置宽高

浮动的元素不再区分块级元素、行内元素，已经脱离了标准文档流，一律能够设置宽度和高度，即使它是span或者a标签等。示例如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        span {
            float: left;
            width: 100px;
            height: 30px;
            background-color: orange;
            margin-right: 10px;
        }
    </style>
</head>
<body>
    <span>1</span>
    <span>2</span>
    <span>3</span>
    <span>4</span>
</body>
</html>

网页效果如下：

在这里插入图片描述

右浮动

float:right;即可设置右浮动，示例如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .box {
            width: 400px;height: 200px;
            border: 1px solid #000;
        }
        .c1 {background-color:orange;}
        .c2 {background-color:blue;}
        .c1,.c2 {
            width: 200px;height: 200px;
            float: right;
        }
    </style>
</head>
<body>
    <div class="box">
        <div class="c1">1</div>
        <div class="c2">2</div>
    </div>
</body>
</html>