清除浮动的方法

最新推荐文章于 2024-04-29 16:58:49 发布

木易一

最新推荐文章于 2024-04-29 16:58:49 发布

阅读量85

点赞数

分类专栏： JavaScript

本文链接：https://blog.csdn.net/weixin_43684713/article/details/89152499

版权

JavaScript 专栏收录该内容

43 篇文章 1 订阅

订阅专栏

当父元素不设置高或者高设置为auto或者父元素的高度小于子元素高度时，子元素若浮动，即脱离文本流（这时无论你怎么调子元素的高度，父元素的高度都不会有变化），此时父元素就会出现塌陷（即高度为0或者为你设置的高度），这可能会影响页面下面的布局，所以在设置了浮动后要清除浮动。

那么，清除浮动有哪些方式？

一、overflow：hidden

我们最常使用的就是给子元素设置浮动后，给父元素写overflow：hidden，但这个方法仅限于父元素没有高度或者高度为auto的时候。因为overflow：hidden还有一个意思是超出部分隐藏（即如果你设置了父元素的高度，且父元素的高度小于子元素高度，那么子元素超出父元素的部分会被隐藏）。

如下代码，定义两个div,父元素背景为粉色，宽度为200px，子元素背景为蓝色，宽度为100px；

<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style>
        .a{
            width: 200px;
            height: auto;
            background-color: pink;
        }
        .b{
            width: 100px;
            height: 100px;
            float: left;
            background-color: #7ecef3;
        }
    </style>
</head>
<body>
<div class="a">
    <div class="b"></div>
</div>
</body>
</html>

在不给子元素设置overflow：hidden的时候，如下图，很明显，父元素没有撑开；

给父元素设置overflow：hidden后，视图为：

二、clear清除浮动

clear的用法官方解释为“元素盒子的边不能和前面的浮动元素相邻”。即它只会让自己离开不会让他周围的元素离开。比如：clear：left，因为左边有浮动元素，它不会改变左边的浮动元素，所以只能自己离开左边的浮动元素，换到下一行，这样他的左边就不会有浮动元素了。
要想使父元素撑开，设置clear的元素就不能浮动。
清除方法是：
内部标签：在子元素同级添加空标签，然后在css设置clear：both，这样会是父元素的高度撑开。
外部标签：在父元素同级添加空标签，然后css设置clear：both，这样会将浮动盒子的影响清除，但是父元素不会撑开。
（不建议使用这种方法，因为这样会增加没有必要的空标签）

如下代码，在上面代码的前提下，加入新的子元素c并且新加的子元素的样式写为clear：both，这样即可清除浮动

<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style>
        .a{
            width: 200px;
            height: auto;
            background-color: pink;
        }
        .b{
            width: 100px;
            height: 100px;
            float: left;
            background-color: #7ecef3;
        }
        .c{
           clear: both;
        }
    </style>
</head>
<body>
<div class="a">
    <div class="b"></div>
    <div class="c"></div>
</div>
</body>
</html>

运行结果：

三、使用伪元素after来清除浮动

为兼容IE6,IE7，因为ie6,ie7不能用after伪类。需要在父元素里加上下面代码zoom：1；
<style type="text/css">
.a{
            margin:0 auto;
            width:500px;
            border:1px solid red;
            zoom:1;
        }
        .a:after{
            content:"";//设置内容为空
            display:block;//将文本转为块级元素
            height:0;//高度为0
            line-height:0;//行高为0
            visibility: hidden;//将元素隐藏
            clear:both;//清除浮动
        }
        .b{
            float: left;
            width:100px;
            height:300px;
            background-color: green;
        }
        .c{
            float:left;
            width:100px;
            height:300px;
            background-color: yellow;

        }
        .d{
            float:left;
            width:100px;
            height:200px;
            background-color: navajowhite;

        }
</style>

<div class="a">
 <div class="b"></div>
    <div class="c"></div>
    <div class="d"></div>
</div>

尽量使用这种方式

四、双伪类清除浮动

.a:before,.a:after {

                  content: "";

                  display: block;

                  clear: both;

            }

            .a{

                  zoom: 1;

            }

此方法不推荐使用