清除浮动的几种方法-蒲公英云

1. 浮动

   浮动的框可以向左或向右移动，直到它的外边缘碰到包含框或另一个浮动框的边框为止。
   由于浮动框不在文档的普通流中，所以文档的普通流中的块框表现得就像浮动框不存在一样。
   也就是说浮动的元素脱离了文档流，导致其他元素到了浮动元素的下面，被浮动的元素覆盖等现象。

简单案例代码1：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .parent{
            width: 500px;
            height: 500px;
            background-color: brown;         
        }
        .child1,.child2,.child3{
            width: 50px;
            height: 50px;
            margin: 10px;
            border: 5px solid green;
        }
        .child1{
            background-color: black;
            /*float: left;*/
        }
        .child2{
            background-color: skyblue;
        }
        .child3{
            background-color: slateblue;
        }
    </style>
</head>
<body>
    <div class="parent">
        <div class="child1"></div>
        <div class="child2"></div>
        <div class="child3"></div>
    </div>
</body>
</html>

上面是没有浮动的代码，效果图1如下：

watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3NvbmdsZjUyMQ_size_16_color_FFFFFF_t_70

  ** 当 child1浮动时，即 float：left；时，效果图2如下：**

watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3NvbmdsZjUyMQ_size_16_color_FFFFFF_t_70 1

当然，浮动的案例还有很多。这里只简单介绍这个，像上面的情况发生了，我们需要清除浮动带来的效果。

2. 清除浮动的方法

2.1 overflow:hidden/auto;

    给被浮动元素覆盖的元素添加  overflow:hidden/auto; 的css样式。父元素最好也加上overflow:hidden/auto属性，避免margin属性不生效的问题。
    浮动前的**案例代码2**如下：  
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .parent{
            width: 500px;
            height: 500px;
            background-color: brown; 
        }
        .child1,.child2,.child3{
            width: 50px;
            height: 50px;
            margin: 10px;
            border: 5px solid green;           
        }
        .child1{
            background-color: black;
            float: left;           
        }
        .child2{
            background-color: skyblue;
        }
        .child3{
            background-color: slateblue;
        }
    </style>
</head>
<body>
    <div class="parent">
        <div class="child1"></div>
        <div class="child2"></div>
        <div class="child3"></div>
    </div>
</body>
</html>

效果图3

watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3NvbmdsZjUyMQ_size_16_color_FFFFFF_t_70 2

清除浮动后的案例代码3如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .parent{
            width: 500px;
            height: 500px;
            background-color: brown; 
            overflow: hidden; /*或者auto*/     
        }
        .child1,.child2,.child3{
            width: 50px;
            height: 50px;
            margin: 10px;
            border: 5px solid green;           
        }
        .child1{
            background-color: black;
            float: left;           
        }
        .child2{
            background-color: skyblue;
            overflow: hidden;/*或者auto*/
        }
        .child3{
            background-color: slateblue;
        }
    </style>
</head>
<body>
    <div class="parent">
        <div class="child1"></div>
        <div class="child2"></div>
        <div class="child3"></div>
    </div>
</body>
</html>

效果图4如下

watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3NvbmdsZjUyMQ_size_16_color_FFFFFF_t_70 3

2.2 clear:both;

    在浮动元素的后面加一个空标签，样式设置为 clear:both;

浮动前的案例代码如案例代码2，效果图如效果图3

清除浮动后，案例代码4如下

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .parent{
            width: 500px;
            height: 500px;
            background-color: brown;      
        }
        .child1,.child2,.child3{
            width: 50px;
            height: 50px;
            margin: 10px;
            border: 5px solid green;           
        }
        .child1{
            background-color: black;
            float: left;           
        }
        .child2{
            background-color: skyblue;
        }
        .child3{
            background-color: slateblue;
        }
    </style>
</head>
<body>
    <div class="parent">
        <div class="child1"></div>
        <div style="clear: both;"></div>
        <div class="child2"></div>
        <div class="child3"></div>
    </div>
</body>
</html>

效果图5如下

watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3NvbmdsZjUyMQ_size_16_color_FFFFFF_t_70 4

2.3 ::after伪元素

    如果父元素没有设置高度，内部的子元素都设置了浮动，那么这个父元素没有被撑开，高度是0，这种情况下，可以给父元素添加清除浮动的伪元素，父元素自动被撑开。

浮动前的案例代码5如下

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .parent{
            width: 500px;
            background-color: brown;      
        }
        .child1,.child2,.child3{
            width: 50px;
            height: 50px;
            margin: 10px; 
            float: left;          
        }
        .child1{
            background-color: black;                      
        }
        .child2{
            background-color: skyblue;
        }
        .child3{
            background-color: slateblue;
        }
    </style>
</head>
<body>
    <div class="parent">
        <div class="child1"></div>
        <div class="child2"></div>
        <div class="child3"></div>
    </div>
</body>
</html>

浮动前的效果图6如下

watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3NvbmdsZjUyMQ_size_16_color_FFFFFF_t_70 5

使用伪元素清除浮动后的案例代码6如下

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .parent{
            width: 500px;
            background-color: brown;      
        }
        .child1,.child2,.child3{
            width: 50px;
            height: 50px;
            margin: 10px; 
            float: left;          
        }
        .child1{
            background-color: black;                      
        }
        .child2{
            background-color: skyblue;
        }
        .child3{
            background-color: slateblue;
        }
        .clearfix::after{
            content: '';
            display: block;
            height: 0;
            clear: both;
        }
        .clearfix{
            zoom: 1;
        }
    </style>
</head>
<body>
    <div class="parent clearfix">
        <div class="child1"></div>
        <div class="child2"></div>
        <div class="child3"></div>
    </div>
</body>
</html>