清除浮动的几种方法

最新推荐文章于 2022-02-27 20:56:02 发布

原创最新推荐文章于 2022-02-27 20:56:02 发布 · 502 阅读

0 ·

本内容遵循CC 4.0 BY-SA版权协议

标签

#清除浮动 #float #css #clear

本文介绍了六种常见的清除浮动的方法，包括给父元素添加高度、使用额外的标签、利用伪元素、设置overflow属性、父元素也设置浮动及使用display属性等，并详细分析了各自的优缺点。

清除浮动的几种方法

首先编写好样式

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>
    小测试
    </title>
        <link rel="shortcut icon" href="/favicon.ico"/>
    <style type="text/css">
        *{
            margin: 0;
            padding: 0;
        }
        .box1{
            border: 1px solid #f55;
            width: 500px;
        }
        .left{
            float: left;
            height: 100px;
            background: blue;
            width: 50%;
        }
        .right{
            float: right;
            height: 50px;
            background: yellow;
            width: 50%;
        }
        .box2{
            border: 1px solid #f55;
            background: #ccc;
            height: 200px;
            margin-top: 20px;
            width: 600px;
        }

</style>
</head>
<body>
<div class="box1">
    <div class="left">左边</div>
    <div class="right">右边</div>
    <div class="clear"></div>
</div>
<div class="box2">这是box2的内容</div>
</body>
</html>

没有清除浮动

清除之后

1.给父元素添加高度


.box1{
            border: 1px solid #f55;
            width: 500px;
            height: 100px;
        }

使用方式简单,代码简洁但是只能用于高度固定是使用

2.给子元素末尾添加一个相同的兄弟元素,设置样式clear: both


<!-- css样式 -->
.clearFloat{
            clear: both;
        }

<div class="box1">
    <div class="left">左边</div>
    <div class="right">右边</div>
    <div class="clearFloat"></div>
</div>

同样代码简洁好用, 但是会增加多余的空标签,如果有多个则不太适用

3.给父元素添加伪类和zoom属性


<!-- css样式 --> 
.clearFloat{
    zoom:1;
} 
.clearFloat:after{
    display: block;
    content: "";
    clear: both;
}
<div class="box1 clearFloat">
    <div class="left">左边</div>
    <div class="right">右边</div>
</div>

zoom是为解决ie6,ie7不支持:after问题浏览器支持比较好推荐使用

4.给父元素设置overflow:hidden或auto


.box1{
            border: 1px solid #f55;
            width: 500px;
            overflow: auto;
            /*overflow: hidden;*/
        }

必须定义width或zoom:1，同时不能定义height

设置overflow浏览器会自动检测浮动区域高度,但是当内部宽高大于外部时候会出现滚动条

5.父元素也设置浮动


        .box1{
            border: 1px solid #f55;
            width: 500px;
            float: left;
        }
        
        .box2{
            border: 1px solid #f55;
            background: #ccc;
            height: 200px;
            margin-top: 20px;
            width: 600px;
            clear: both;
        }

会产生新的浮动问题,不推荐使用

6.父元素设置display:tiable或flex都可以


.box1{
        border: 1px solid #f55;
        width: 500px;
        /*display:table;*/
        display: flex;
    }

不推荐使用,因为可能会产生新的问题