一天搞定CSS：清除浮动（float）--13

╰半夏微凉° 2022-06-16 08:23 214阅读 0赞

上一节已经说明了为什么要清除浮动了。这里我们就来解决浮动产生的各种问题。

**为什么要清楚浮动？**

> **地址：[http://blog.csdn.net/baidu\_37107022/article/details/71554283][http_blog.csdn.net_baidu_37107022_article_details_71554283]**

# **1.清除浮动方法概览** #

![这里写图片描述][SouthEast]

# **2.clear方法** #

![这里写图片描述][SouthEast 1]

**代码演示**

<!DOCTYPE html>
    <html>
        <head>
            <meta charset="UTF-8">
            <title></title>
            <style>
                div{
                    width: 100px;
                    height: 200px;
                    background: red;
                }
    
                /*1.left   元素的左边不能有浮动的元素*/
                /*.div1{
                    float: left;
                }
                .div2{
                    clear: left;
                }*/
    
    
                /*2.right       元素的右边不能有浮动的元素*/
                /*.div1{
                    float: right;
                }
                .div2{
                    clear: right;
                }*/
    
                /*3.both        元素的两都不能有浮动的元素*/
                .div1{
                    float: left;
                }
                .div2{
                    float: right;
                }
                .div3{
                    clear: both;
                }
            </style>
        </head>
        <body>
            
            <div class="div1">kaivon1</div>
            <div class="div2">kaivon2</div>
            <div class="div3">kaivon3</div>
        </body>
    </html>

**效果图**

**清除浮动前：div3钻到了div1下面**  
![这里写图片描述][SouthEast 2]

**清除浮动后：**  
![这里写图片描述][SouthEast 3]

# **3.方法2–6的** #

![这里写图片描述][SouthEast 4]

**代码演示：**

<!DOCTYPE html>
    <html>
        <head>
            <meta charset="UTF-8">
            <title></title>
            <style>
                .parent{
                    border: 1px solid #f00;
    
                    /*2、给父级添加高度：没有从根本上解决浮动的问题*/
                    /*height: 100px;*/
    
    
                    /*3、inline-block*/
                    /*display: inline-block;
                    margin: 0 auto;*/
    
                    /*4、overflow:hidden;*/
                    /*overflow: hidden;*/
                }
                .box{
                    width: 100px;
                    height: 100px;
                    background: green;
                    float: left;
                }
            </style>
        </head>
        <body>
            
            <div class="parent">
                <div class="box"></div>
    
                
                
    
                 
                <br clear="all" />
            </div>
    
        </body>
    </html>

**效果图**

**清除浮动前：**

![这里写图片描述][SouthEast 5]

**清除浮动后：**  
![这里写图片描述][SouthEast 6]

# **4.after伪类清除浮动（现在最主流的方法）** #

![这里写图片描述][SouthEast 7]

**代码演示**

<!DOCTYPE html>
    <html>
        <head>
            <meta charset="UTF-8">
            <title></title>
            <style>
                .parent{
                    border: 1px solid #f00;
                }
                .box{
                    width: 100px;
                    height: 100px;
                    background: green;
                    float: left;
                    color: #fff;
                }
                /*
                 * 7、after伪类清除浮动（现在最主流的方法）
                 * 
                 * .box:after{
                    content: '这是伪类生成的内容';
                }*/
                .clearfix{
                    *zoom:1;
                }
                .clearfix:after{
                    content: '';
                    display: block;
                    clear: both;
                }
            </style>
        </head>
        <body>
            
            <div class="parent clearfix">
                <div class="box"></div>
            </div>
    
        </body>
    </html>

**效果图同上（第3点）**

[http_blog.csdn.net_baidu_37107022_article_details_71554283]: http://blog.csdn.net/baidu_37107022/article/details/71554283
[SouthEast]: /images/20220616/c23ec1171561440789a96699d46332e1.png
[SouthEast 1]: /images/20220616/a5b6d7b9d3804cf0ae01d4391c090d08.png
[SouthEast 2]: /images/20220616/080ed24d0bab4952ba90d347130a8c4c.png
[SouthEast 3]: /images/20220616/356865fb49f6424bb362cc617c557b1f.png
[SouthEast 4]: /images/20220616/49ca50dc95eb4c0885498b9ae1c57c93.png
[SouthEast 5]: /images/20220616/34dd0a0878bd43c0849b0c579cebca83.png
[SouthEast 6]: /images/20220616/cd76785095b34a65bc44aaabd702bf63.png
[SouthEast 7]: /images/20220616/e40d134252164a7dad77e2a605cf43b6.png