css为何要清除浮动及清除浮动的方法

古城微笑少年丶 2023-07-24 09:15 29阅读 0赞

**一：css为何要清除浮动**  
1.很多情况下，如果我们使用了float特效，出现margin，padding设置不能正确显示，浮动会导致父级子级之间设置了padding，导致了属性不能正常传达，导致margin不能正常显示，所以我们要清除浮动。  
2.导致背景不能显示，如果对父级设置了背景属性，导致父级不能撑开，会影响到背景图片不能正常打开。  
3.边框不能撑开，由于子级使用了浮动效果，并且已经产生了浮动，父级不能撑开，所以影响边框不会随着内容的变化而变化。

*  首先介绍一下背景：
 *  一个未设置高度的父盒子里边包含两个浮动的子盒子，且还有一个未浮动的与父盒子同级的盒子出现向上“塌陷”。  
    （1）html代码

（2）css代码

* { 
                margin: 0;
                padding: 0;
            }
            
            .sky { 
                width: 1200px;
                border: 1px solid red;
                margin: 0 auto;
            }
            
            .sky1 { 
                width: 300px;
                height: 300px;
                background-color: pink;
                float: left;
            }
            
            .sky2 { 
                width: 100px;
                height: 100px;
                background-color: greenyellow;
                float: right;
            }
            
            .sky3 { 
                width: 100%;
                height: 50px;
                background-color: purple;
            }

（3）呈现布局  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2N3cTUyMW8_size_16_color_FFFFFF_t_70_pic_center]  
二：清除浮动的方法

*  1.使用after伪类清除浮动(代表：网易，百度，淘宝，京东)  
    （1）css（在父盒子class后面空格后加上clearfix类）

.clearfix::after { 
                content: "";
                display: block;
                height: 0;
                clear: both;
                visibility: hidden;
            }
            
            .clearfix { 
                /* ie6清除浮动的方式，为兼容ie6-ie7浏览器 */
                *zoom: 1;
            }

（2）呈现页面  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2N3cTUyMW8_size_16_color_FFFFFF_t_70_pic_center 1]

*  2.使用before和after双伪元素清除浮动（代表：腾讯，小米）  
    css（在父盒子class后面空格后加上clearfix类）

.clearfix::before, .clearfix::after { 
                content: "";
                 /* 触发BFC清除浮动 */
                display: table;
            }
            
            .clearfix::after { 
                clear: both;
            }
            
            .clearfix { 
                *zoom: 1;
            }

*  3.创建额外标签的方法（在父盒子里边创建浮动盒子的同级标签）  
    (1)css(写入新创建标签的样式)

.clear { 
                clear: both;
            }

（2）html

*  4.父盒子添加 overflow属性（hidden，auto，scroll）均可

.sky { 
                width: 1200px;
                border: 1px solid red;
                margin: 0 auto;
                overflow: hidden;
            }

*  5.给父盒子添加理想高度（包住所有浮动的子盒子）

.sky { 
                width: 1200px;
                border: 1px solid red;
                margin: 0 auto;
                height: 300px;
                /* overflow: hidden; */
            }

**OVER：更多实用小技巧请见下节分享**

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2N3cTUyMW8_size_16_color_FFFFFF_t_70_pic_center]: /images/20230528/b28667d5aaee4bcd9946d44e84d155ba.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2N3cTUyMW8_size_16_color_FFFFFF_t_70_pic_center 1]: /images/20230528/19a41423abca47178c8cb3e6862ffa94.png