关于清除浮动的方法总结

一、为什么要清除浮动？

首先我们看一张图片：

 

 我们设置了一个粉色父盒子里面装着一个蓝色小盒子，因为没有给父盒子设置高度所以粉色盒子高度是被内容蓝色小盒子撑开的，如果我们给蓝色小盒子添加浮动，会发生什么呢？

   .box {
            width: 700px;
            background-color: pink;
        }
        
        .box1 {
            float: left;
            width: 100px;
            height: 100px;
            background-color: skyblue;
        }

请看网页效果图：

 

 图中可以看出粉色父盒子“消失”了，这是因为浮动的特性带来的父盒子高度塌陷问题，也就是我们为什么要清除浮动，清除浮动并不是字面意思的把浮动属性去掉，而是清除浮动带来的问题。

以下是官方解释说明：

在非IE浏览器（如Firefox）下，当容器的高度为auto，且容器的内容中有浮动（float为left或right）的元素，在这种情况下，容器的高度不能自动伸长以适应内容的高度，使得内容溢出到容器外面而影响（甚至破坏）布局的现象。这个现象叫浮动溢出，为了防止这个现象的出现而进行的CSS处理，就叫CSS清除浮动。

二、清除浮动方法 

• 额外标签法也称为隔墙法，是 W3C 推荐的做法。（clear：both）

• 父级添加 overflow 属性

• 父级添加after伪元素

• 父级添加双伪元素

方法1

 我们在小盒子后面加一个新的标签建立一堵墙，然后在里面设置样式:clear:both;

 注意：新建的标签盒子必须是块级元素

 <div class="box">
        <div class="box1"></div>
        <div class="wall" style="clear: both;"></div>
    </div>

网页效果图：

 可以看出父盒子高度塌陷问题已经解决。

方法2

父级添加overflow: hidden;

 就是向父元素下手，将溢出部分隐藏，即可达到清除浮动效果

   <div class="box"  style="overflow: hidden;">
        <div class="box1"></div>
    </div>

网页效果图：

 可以看出父盒子高度塌陷问题已经解决。

方法3

后面两种伪元素清除浮动算是第一种额外标签法的一个升级和优化 ;

• 父级添加after伪元素

• 父级添加双伪元素

 这两种方法区别就是第一个是在浮动盒子之后加一个伪元素，第二个在浮动盒子前后都加了一个伪元素，此方法不用额外加标签，美化了结构（结构永远比样式重要），减少结构标签冗余。

单伪元素清除浮动

 

 

双伪元素清除浮动

使用时将此代码复制进CSS,对此类进行引用即可,非常方便简洁。

使用后网页效果图：

 可以看出父盒子高度塌陷问题已经解决。

 三、感谢

以上就是清除浮动的四种方式总结，感谢阅读~