CSS清除浮动（1）

最新推荐文章于 2022-08-29 15:42:20 发布

Benjamin1109

最新推荐文章于 2022-08-29 15:42:20 发布

阅读量164

点赞数 2

分类专栏： web前端文章标签： css3 html5 前端

本文链接：https://blog.csdn.net/qq_44829685/article/details/123605519

版权

web前端专栏收录该内容

1 篇文章 0 订阅

订阅专栏

浮动知识前瞻

在对页面布局时，我们经常会用到‘浮动’这一属性也就是float，浮动又分为左浮动与右浮动对应属性值为‘left’与’right’，它在页面中得表现是什么样子的呢？我们先看一下没有浮动属性得代码与Web界面：

<head>
    <style>
        #father{
            width: 500px;
            height: 300px;
            background-color: #ccc;
        }
        #son1{
            width: 80px;
            height: 80px;
            background-color: hotpink;
        }
        #son2{
            width: 80px;
            height: 80px;
            background-color: deepskyblue;
        }
    </style>
</head>
<body>
    <div id="father">
        <div id="son1"></div>
        <div id="son2"></div>
    </div>
</body>

在这里插入图片描述
我们给son1添加左浮动：

        #son1{
            width: 80px;
            height: 80px;
            background-color: hotpink;
            float: left;
        }

对应的样式变为：
在这里插入图片描述
可以看到son2蓝色方块不见了，它去哪儿了呢？为什么会这个样子呢？这就要讲一下浮动带来得效果：添加浮动属性(无论左浮动还是右浮动)会使得元素脱离标准文档流简称脱标，从而’飘起来‘，意思是它不与标准元素一起‘站队’而是’自立门户‘，并且脱标后的元素会把原来属于它得标准流空间腾出来，我们称为空间释放。

现在经过设置浮动属性脱标，并且释放了空间，那么前面的空位不能让它空着，后面的标准流元素向前’挪‘，son2蓝色盒子跑到了最前面，因为son1红盒子设置了浮动’飘起了‘，正好把蓝盒子盖住，这就是出现上图结果得因素。

现在我们尝试以下把son2蓝盒子也设置左浮动，观察会出现什么效果：

        #son2{
            width: 80px;
            height: 80px;
            background-color: deepskyblue;
            float: left;
        }

在这里插入图片描述
两个盒子都展现在了我们得面前，原因是二者都不再占用标准流，都处于脱标的状态，根据代码执行的顺序‘先来后到’，蓝盒子排在红盒子得后面。同样的，若设置浮动属性为右浮动：

        #son1{
            width: 80px;
            height: 80px;
            background-color: hotpink;
            float: right;
        }
        #son2{
            width: 80px;
            height: 80px;
            background-color: deepskyblue;
            float: right;
        }

在这里插入图片描述

浮动问题解决

下面正式进入主题，我们在什么情况下需要清除浮动呢？请阅读下面得代码：我们添加了一个p标签，位于两个div盒子下面，目的是可以让p中的内容在两个盒子得下面显示，那么在两个盒子都是处于浮动的情况下可以实现我们想要的效果吗？

<body>
    <div id="father">
        <div id="son1"></div>
        <div id="son2"></div>
        <p>这是一个p标签</p>
    </div>
</body>

在这里插入图片描述
显然不能！这是因为两个盒子已经脱标，已经把空间释放掉了，不与p标签一起‘排队’，那自然p标签就在最前面。

遇到问题解决问题：在CSS中有这么一个属性叫做clear，它专门用来清除浮动的，取值有三个：

clear:left /*清除左浮动*/
clear:right /*清除右浮动*/
clear:both /*清除左右浮动*/

我们现在为p标签得css添加 clear:right：

        p{
            background-color: rgb(115, 216, 115);
            clear:right
        }

在这里插入图片描述
问题解决！但是有细节需要说明一下：1.怎么判断为哪个元素添加清楚浮动属性。2.三个clear我应该怎么选择？
对于第一个问题，我们要看哪一个元素受到了浮动的影响，为受到影响的元素添加清除浮动属性。对于第二个问题，我们要看受到怎样的浮动影响，比如我们所举出的例子，因为p受到了右浮动的影响，我们为p添加了clear:right，但是我们以可以使用clear:both。