几种清除浮动的方法

2017-10-22

CSS

引出使用场景
解决方法

在网页设计中清除浮动是一种非常常见的需求，这篇博客将介绍几种常见的清除浮动的方法

引出使用场景

假定我们需要创建3个div标签，并且将他们的类名分别命名为box1、box2和box3，将box1和box2放在第一行，将box3放在第二行，最常见的方法是分别给box1和box2都加上一个float:left属性，让他们浮动，实现代码如下

<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>几种清除浮动的方法</title>
<style>
    div {
        width: 100px;
        height: 100px;
        margin: 10px;
    }

    .box1 {
        background-color: red;

        /* 使第一个div标签向左浮动 */
        float: left;
    }

    .box2 {
        background-color: green;

        /* 使第二个div标签向左浮动 */
        float: left;
    }

    .box3 {
        background-color: blue;
    }
</style>
</head>
<body>
    <div class="box1">我是box1</div>
    <div class="box2">我是box2</div>
    <div class="box3">我是box3</div>
</body>
</html>

上述代码在浏览器中的运行效果如下：

分析：通过上图展示的效果我们可以看出box1和box2虽然都在第一行，但是在没有给box3设置浮动的情况下，box3也跑到了第一行上，因为当给box1和box2设置了浮动后，而浮动的元素是脱离了标准文档流，而浏览器会认为脱离了标准文档流的元素不占位置，而box3依然在标准文档流中，所以box3会跑到浏览器的最左端

解决方法

方法1：使用clear : both清除浮动

在box3中添加clear : both清除浮动对box3的影响

.box3 {
    background-color: blue;
    clear: both;
}

在浏览器中运行的效果：

当我们需要给box3设置padding属性和设置margin属性时

.box3 {
    padding: 100px;
    margin: 100px;
    background-color: blue;
    clear: both;
}

在浏览器中的效果

通过观察可知，当给box3设置一个margin值为100px后发现box3的margin-top和margin-bottom并没有发生变法，这就是使用Clear : both清除浮动的一个弊端，使用Clear : both清除浮动会使得元素的margin-top和margin-bottom属性失效

方法2：使用ovflow: hidden

为box1、box2两个元素引入一个父元素，并且给父元素添加一个overflow : hiden属性

<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>几种清除浮动的方法</title>
<style>
    p {
        width: 100px;
        height: 100px;
        margin: 10px;
    }

    .box1 {
        background-color: red;

        /* 使第一个div标签向左浮动 */
        float: left;
    }

    .box2 {
        background-color: green;

        /* 使第二个div标签向左浮动 */
        float: left;
    }

    .box3 {
        padding: 100px;
        margin: 100px;
        background-color: blue;
    }

    .container {

        /* 给三个div元素的父元素设置一个overflow: hidden属性 */
        overflow: hidden;
    }
</style>
</head>
<body>
    <div class="container">
        <p class="box1">我是box1</p>
        <p class="box2">我是box2</p>
    </div>
    <p class="box3">我是box3</p>
</body>
</html>

在浏览器中运行的效果如下：

通过观察可知使用overflow: hidden属性清除浮动，不会让box3的margin-top属性和margin-bottom属性失效

方法3：使用伪类清除浮动

在实际开发中为了解决清除浮动在不同浏览器下的兼容问题，我们通常会定义一个clearfix类，当那个元素需要清除浮动，就给该元素的父元素设置clearfix类，clearfix类的代码如下

.clearfix:after {
    content: '';
    height: 0;
    clear: both;
    overflow: hidden;
    visibility: hidden;
    display: block;
}

.clearfix {
    *zoom: 1;
}

给浮动的元素的父元素添加clearfix类

<body>
    <div class="clearfix">
        <p class="box1">我是box1</p>
        <p class="box2">我是box2</p>
    </div>
    <p class="box3">我是box3</p>
</body>

meishadevs欢迎任何形式的转载，但请务必注明出处，尊重他人劳动成果。
转载请注明：【文章转载自meishadevs：几种清除浮动的方法】

上一篇：使用background-size引发的思考

下一篇：在手机上查看移动Web页