【CSS】HTML中如何清理浮动

最新推荐文章于 2024-07-09 22:55:28 发布

二木成林

最新推荐文章于 2024-07-09 22:55:28 发布

阅读量523

点赞数 1

分类专栏：前端

本文链接：https://blog.csdn.net/cnds123321/article/details/84257588

版权

前端专栏收录该内容

10 篇文章 1 订阅

订阅专栏

首先我们看下没有浮动的样式：

html代码：

<div id="div1">
    <div id="blue"></div>
    <div id="pink"></div>
</div>

css代码：

#div1 {
    background:purple;
}
#blue {
    width:200px;
    height:100px;
    background:blue;
    
}
#pink {
    width:250px;
    height:150px;
    background:pink;
}

效果图：

现在我们给左下角的粉色div添加一个向左的浮动（float:left)

现在的#right代码变成了下面这样的。

#pink {
    width:250px;
    height:150px;
    background:pink;
    float:left;
}

效果图如下：

发现紫色的div全部跑到了粉色的上面，高度和蓝色div一样。

现在再给蓝色div添加一个向左的浮动（float:left）。

#blue {
    width:200px;
    height:100px;
    background:blue;
    float:left;
}

效果图如下：

发现紫色的div消失了，而粉色的div和蓝色div并排在一起了。

所以说在元素进行了浮动后默认是出现在同一行，而且浮动元素的位置是到父级的边界或者是遇到另外一个浮动元素才会停止。

那么如果不想紫色div消失，那么就需要消除浮动，方法如下：

方法一：给父元素以高度和宽度。

#div1 {
    background:purple;
    width:500px;
    height:250px;
}

效果图如下：

方法二：父级元素加上overflow：hidden

如果不想给紫色div固定的宽高，想让它的内容将它撑开。那么我们就可以在父级元素上也就是紫色div的css中加上overflow：hidden。从而让紫色div显示出来了。

#div1 {
    background:purple;
    overflow:hidden;
}

效果图如下：

方法三：给兄弟元素加一个clear：both

html代码：

<div id="div1">
    <div id="blue"></div>
    <div id="pink"></div>
    <div id="div2"></div>
</div>

css代码：

#div2 {
    clear:both;
}

全部代码：

<!DOCTYPE html>
<html>

<head>
<style type="text/css">
#div1 {
    background:purple;
}
#blue {
    width:200px;
    height:100px;
    background:blue;
    float:left;
}
#pink {
    width:250px;
    height:150px;
    background:pink;
    float:left;
}
#div2 {
    clear:both;
}
</style>
</head>

<body>

<div id="div1">
    <div id="blue"></div>
    <div id="pink"></div>
    <div id="div2"></div>
</div>

</body>

</html>

除了对父级进行改变，我们也可以对子元素的兄弟元素进行改动，从而达到去除浮动的效果。

效果图如下：

方法四：利用伪类去除浮动

html代码:

<div class="div_class">
    <div id="blue"></div>
    <div id="pink"></div>
</div>

css代码：

        .div_class {
            background:purple;
        }
        .div_class:after {

            content:"";
            clear: both;
            display: block; <!--可以是block，也可以使用table或者list-item也可以，但是需要去掉项目符号。--> 
        }

全部代码：

<!DOCTYPE html>
<html>

<head>
    <style type="text/css">
        .div_class {
            background:purple;
        }
        .div_class:after {

            content:"";
            clear: both;
            display: block; <!--可以是block，也可以使用table或者list-item也可以，但是需要去掉项目符号。--> 
        }
        #blue {
            width:200px;
            height:100px;
            background:blue;
            float:left;
        }
        #pink {
            width:250px;
            height:150px;
            background:pink;
            float:left;
    }
    </style>
</head>

<body>

<div class="div_class">
    <div id="blue"></div>
    <div id="pink"></div>
</div>

</body>

</html>

效果图如下：