清除浮动的几种方法

柔情只为你懂 2022-11-12 13:52 181阅读 0赞

## 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>

清除浮动后的**效果图7**如下：

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3NvbmdsZjUyMQ_size_16_color_FFFFFF_t_70 6][]

清除图

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3NvbmdsZjUyMQ_size_16_color_FFFFFF_t_70]: /images/20221022/d0eaabefee8b40ed9811c936cc8cd416.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3NvbmdsZjUyMQ_size_16_color_FFFFFF_t_70 1]: /images/20221022/ed2aebaa384047b49b3c0539c5e6cadd.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3NvbmdsZjUyMQ_size_16_color_FFFFFF_t_70 2]: /images/20221022/720b537385604c4e8023a7de7d3c57df.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3NvbmdsZjUyMQ_size_16_color_FFFFFF_t_70 3]: /images/20221022/1451346bac5f4c9b9107cc9625830a65.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3NvbmdsZjUyMQ_size_16_color_FFFFFF_t_70 4]: /images/20221022/2cd86d00bab24d88ae017beb3394689e.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3NvbmdsZjUyMQ_size_16_color_FFFFFF_t_70 5]: /images/20221022/074881302e134c8a87ab8e5a4f54f5de.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3NvbmdsZjUyMQ_size_16_color_FFFFFF_t_70 6]: /images/20221022/6af6837fdcaf41a0a3a1f982604f8acf.png