CSS 浮动

最新推荐文章于 2024-06-22 19:05:40 发布

冯胖胖儿

最新推荐文章于 2024-06-22 19:05:40 发布

阅读量194

点赞数 1

文章标签： html css

本文链接：https://blog.csdn.net/weixin_46382875/article/details/104445286

版权

float（浮动）是CSS布局中使用比较多的一个属性；
float 属性定义元素在哪个方向浮动。以往这个属性总应用于图像，使文本围绕在图像周围，不过在 CSS 中，任何元素都可以浮动。浮动元素会生成一个块级框，而不论它本身是何种元素。
float属性如下：

值	描述
left	元素向左浮动
right	元素向右浮动
none	默认值，元素不浮动
inherit	从父元素继承float属性

首先要知道div是块级元素，在页面中会独占一行，自上而下排列，设当前界面有三个div，效果如下：

<head>
    <meta charset="UTF-8">
    <title>浮动</title>
    <style type="text/css">
    .main{
        width: 800px;
        height: 400px;
        background-color: gray;
    }
    .chlid1{
        width: 100px;
        height: 100px;
        background-color: pink;
    }
    .chlid2{
        width: 200px;
        height: 100px;
        background-color:blue;
    }
    .chlid3{
        width: 300px;
        height: 100px;
        background-color:red;
    }
    </style>
</head>
<body>
    <div class="main">
        <div class="chlid1"></div>
        <div class="chlid2"></div>
        <div class="chlid3"></div>
    </div>
</body>
</html>

div元素默认自上而下依次排列；
假设，我们只让粉色的div浮动，蓝色和红色的div都是默认状态
在这里插入图片描述
此时粉色的div脱离了文档流，释放了空间，不占有空间位置，就等于是在这个界面上飘了起来，而它的位置已经空了出来，蓝色跟红色的的div还是遵循自上而下的排序规则，依次排序；粉色的div只是漂浮在它们上面覆盖住了部分蓝色的div让他看起来“短了”；

我们再把粉色的div添加一个float：right；属性，把它向右浮动：
在这里插入图片描述
现在的粉色div它脱离文档流并且向右移动，直到它的右边缘碰到包含块的右边缘；代码如下：

 .chlid1{
        width: 100px;
        height: 100px;
        background-color: pink;
        float: right;/*让粉色div右浮动*/
    }
    .chlid2{
        width: 200px;
        height: 100px;
        background-color:blue;
    }
    .chlid3{
        width: 300px;
        height: 100px;
        background-color:red;
    }

那如何把三个div让它们在一行内显示，让我们来把它们都添加一个floa:left;属性，效果如下；
在这里插入图片描述
此时，三个div就会全部浮动起来，从而在一行内显示，这就达到了左浮动的效果；代码如下：

.main{
        width: 800px;
        height: 400px;
        background-color: gray;
    }
    .chlid1{
        width: 100px;
        height: 100px;
        background-color: pink;
        float: left;/*左浮动*/
    }
    .chlid2{
        width: 200px;
        height: 100px;
        background-color:blue;
        float: left;/*左浮动*/
    }
    .chlid3{
        width: 300px;
        height: 100px;
        background-color:red;
        float: left;/*左浮动*/
    }

为了让我们能更好的理解，我们再来举个栗子，让粉色的div不浮动，让蓝色的div和红色的的div右浮动，效果如下：
在这里插入图片描述
我们可以清楚的看到，粉色的div没有发生变化，蓝色的div脱离文档流向右移动，直到碰到了右边边缘，因为给红色的div也设置了右浮动，所以红色的div跟随蓝色的div向右移动。
以上这些情况都是在灰色这个div足够大的情况下的效果，假设灰色的div没有那么大，它们会如何显示呢？
举个栗子：
在这里插入图片描述
代码如下：

.main{
        width: 500px;
        height: 400px;
        background-color: gray;
    }
    .chlid1{
        width: 100px;
        height: 100px;
        background-color: pink;
        float: left;
    }
    .chlid2{
        width: 200px;
        height: 100px;
        background-color:blue;
        float: left;
    }
    .chlid3{
        width: 300px;
        height: 100px;
        background-color:red;
        float: left;
    }

这时候疑问来了，为什么我给它们三个都设置了左浮动，红色的div为什么跟在蓝色div的后面。
答;因为它们三个的宽度加起来超过了父元素的范围，也就是这个灰色的div的范围，灰色的div一行放不下这三个元素，那么最后面的那个元素就会被挤到下一行。

冯胖胖儿

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
CSS 浮动

float（浮动）是CSS布局中使用比较多的一个属性；float 属性定义元素在哪个方向浮动。以往这个属性总应用于图像，使文本围绕在图像周围，不过在 CSS 中，任何元素都可以浮动。浮动元素会生成一个块级框，而不论它本身是何种元素。float属性如下：值描述left元素向左浮动right元素向右浮动none默认值，元素不浮动inherit从父元素...
复制链接

扫一扫

CSS 浮动

“相关推荐”对你有帮助么？