CSS清除浮动的方法

最新推荐文章于 2022-05-30 20:50:29 发布

xiaozhaolaodi

最新推荐文章于 2022-05-30 20:50:29 发布

阅读量91

点赞数

分类专栏：前端布局文章标签： css html

本文链接：https://blog.csdn.net/weixin_44206860/article/details/105392069

版权

前端布局专栏收录该内容

2 篇文章 0 订阅

订阅专栏

CSS清除浮动的方法

首先，我们在使用float(浮动)的时候，div的高度就会变为0；

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CSS清楚浮动</title>
    <style>
        .divOuter{
            border: 2px solid orange;
        }
        .div1,.div2,.div3{
            border: 1px solid #CCCCCC;
            float: left;
            height: 150px;
            width: 150px;
            text-align: center;
            line-height: 150px;
            color: red;
        }
    </style>
</head>
<body>
    <div class="divOuter">
        <div class="div1">div1</div>
        <div class="div2">div1</div>
        <div class="div3">div1</div>
    </div>
</body>
</html>

我们现在要解决这个问题有以下几种方法：

1. 给父级元素定义具体高度

给父级元素设置height属性，需要通过精确的计算，让父元素的高度刚好和子元素的高度一样：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CSS清楚浮动</title>
    <style>
        .divOuter{
            border: 2px solid orange;
        }
        .div1,.div2,.div3{
            border: 1px solid #CCCCCC;
            float: left;
            height: 150px;
            width: 150px;
            text-align: center;
            line-height: 150px;
            color: red;
        }
        /* 方法一：给父元素设置height属性,和子元素高度一致 */
        .divOuter{
            height: 150px;
        }
    </style>
</head>
<body>
    <div class="divOuter">
        <div class="div1">div1</div>
        <div class="div2">div1</div>
        <div class="div3">div1</div>
    </div>
</body>
</html>

只适合高度固定的布局，要给出精确的高度，如果高度和父级div不一样时，会产生问题。对于响应式布局会有很大影响。

2. 在标签结尾处加空div标签设置css属性{ clear:both }

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CSS清楚浮动</title>
    <style>
        .divOuter{
            border: 2px solid orange;
        }
        .div1,.div2,.div3{
            border: 1px solid #CCCCCC;
            float: left;
            height: 150px;
            width: 150px;
            text-align: center;
            line-height: 150px;
            color: red;
        }
        /* 方法一：给父元素设置height属性,和子元素高度一致 */
        /* .divOuter{
            height: 150px;
        } */

        /* 方法2：在结尾处加空div 设置{ clear:both } */
        .clear{
            clear: both;
        }
    </style>
</head>
<body>
    <div class="divOuter">
        <div class="div1">div1</div>
        <div class="div2">div1</div>
        <div class="div3">div1</div>
        <!-- 方法2：在结尾处加空div 设置{ clear:both }  -->
        <div class="clear"></div>
    </div>
</body>
</html>

原理：添加一个空div，利用css提供的 { clear:both } 清除浮动，让父级div能自动获取到高度。简单，代码少，不容易出现问题，而且浏览器兼容性比较好；

3. 父级div定义伪类:after 和 zoom

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CSS清楚浮动</title>
    <style>
        .divOuter{
            border: 2px solid orange;
            /* 方法三： 1.父元素加上zoom属性 */
            zoom: 1
        }
        /* 方法三： 2.使用:after伪类，这个是固定写法*/
        .divOuter:after{
            display: block;
            clear: both;
            content: '';
            visibility: hidden;
            height: 0;
        }
        .div1,.div2,.div3{
            border: 1px solid #CCCCCC;
            float: left;
            height: 150px;
            width: 150px;
            text-align: center;
            line-height: 150px;
            color: red;
        }
        /* 方法一：给父元素设置height属性,和子元素高度一致 */
        /* .divOuter{
            height: 150px;
        } */

        /* 方法2：在结尾处加空div 设置{ clear:both } */
        /* .clear{
            clear: both;
        } */
    </style>
</head>
<body>
    <div class="divOuter">
        <div class="div1">div1</div>
        <div class="div2">div1</div>
        <div class="div3">div1</div>
        <!-- 方法2：在结尾处加空div 设置{ clear:both }  -->
        <!-- <div class="clear"></div> -->
    </div>
</body>
</html>

元素生成伪类的作用和效果相当于方法2中的原理，但是IE8以上和非IE浏览器才支持:after，zoom(IE转有属性)可解决ie6,ie7浮动问题优点：浏览器支持好、不容易出现怪问题，写法是固定的，不理解也可以直接复制使用，在这里推荐使用；

4.父级div定义 overflow:hidden

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CSS清楚浮动</title>
    <style>
        .divOuter{
            border: 2px solid orange;
            /* 方法三： 1.父元素加上zoom属性 */
            /* zoom: 1 */
             /* 方法四： 父元素使用overflow：hidden */
            overflow: hidden;
        }
        /* 方法三： 2.使用:after伪类，这个是固定写法*/
        /* .divOuter:after{
            display: block;
            clear: both;
            content: '';
            visibility: hidden;
            height: 0;
        } */
        .div1,.div2,.div3{
            border: 1px solid #CCCCCC;
            float: left;
            height: 150px;
            width: 150px;
            text-align: center;
            line-height: 150px;
            color: red;
        }
        /* 方法一：给父元素设置height属性,和子元素高度一致 */
        /* .divOuter{
            height: 150px;
        } */

        /* 方法2：在结尾处加空div 设置{ clear:both } */
        /* .clear{
            clear: both;
        } */
    </style>
</head>
<body>
    <div class="divOuter">
        <div class="div1">div1</div>
        <div class="div2">div1</div>
        <div class="div3">div1</div>
        <!-- 方法2：在结尾处加空div 设置{ clear:both }  -->
        <!-- <div class="clear"></div> -->
    </div>
</body>
</html>

不能和position配合使用，因为超出的尺寸的会被隐藏。（不建议使用此种方式，可能会影响页面元素布局）