清除浮动的方法及优缺点

最新推荐文章于 2022-06-25 15:36:25 发布

aomize

最新推荐文章于 2022-06-25 15:36:25 发布

阅读量1.2k

点赞数

分类专栏： CSS

本文链接：https://blog.csdn.net/aomize/article/details/78068069

版权

CSS 专栏收录该内容

12 篇文章 0 订阅

订阅专栏

为什么要清除浮动？

下面的例子是浮动对元素的影响

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <style type="text/css">
        .box1 {
            width: 100px;
            background: #999;
        }
        .box2 {
            width: 100px;
            height: 40px;
        }
        .box3 {
            width: 100px;
            height: 40px;
            background-color: #333;
        }
    </style>
</head>
<body>
    <div class="box1">
        <p class="box2"></p>
    </div>
    <div class="box3"></div>
</body>
</html>

这里写图片描述

box2加入float: left属性后的结果如下

这里写图片描述

如图所示，由于box1未设置高度，box3自动补位，如果这样的话，页面就会混乱。所以，我们需要清除这种浮动

以下是清除浮动的几种方法

（1）clear: both

通过给浮动元素下添加div标签并设置clear: both属性

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <style type="text/css">
        .box1 {
            width: 100px;
            background: #999;
        }
        .clear {
            clear: both;
        }
        .box2 {
            width: 100px;
            height: 40px;
            float: left;
        }
        .box3 {
            width: 100px;
            height: 40px;
            background-color: #333;
        }
    </style>
</head>
<body>
    <div class="box1">
        <p class="box2"></p>
        <div class="clear"></div>
    </div>
    <div class="box3"></div>
</body>
</html>

这里写图片描述

优点：简单、代码少、浏览器支持好
缺点：增加了无意义的标签

（2）overflow: hidden

通过给浮动元素的父元素添加overflow: hidden属性来清除浮动

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <style type="text/css">
        .box1 {
            width: 100px;
            background: #999;
        }
        .clear {
            overflow: hidden;
            zoom: 1;   /*处理兼容性问题*/
        }
        .box2 {
            width: 100px;
            height: 40px;
            float: left;
        }
        .box3 {
            width: 100px;
            height: 40px;
            background-color: #333;
        }
    </style>
</head>
<body>
    <div class="box1 clear">
        <p class="box2"></p>
    </div>
    <div class="box3"></div>
</body>
</html>

这里写图片描述

优点：简单、代码少、浏览器支持好
缺点：超出的内容会被隐藏

（3）加入after伪类

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <style type="text/css">
        .box1 {
            width: 100px;
            background: #999;
        }
        .clear:after {
            clear: both;
            content: "";
            display: block;     
            visibility: hidden;
        }
        .box2 {
            width: 100px;
            height: 40px;
            float: left;
        }
        .box3 {
            width: 100px;
            height: 40px;
            background-color: #333;
        }
    </style>
</head>
<body>
    <div class="box1 clear">
        <p class="box2"></p>
    </div>
    <div class="box3"></div>
</body>
</html>