常见易错点——清除浮动（应用场景及方法）简单易懂总结

这几天在做移动端项目布局时，把前面学的pc端的布局给遗忘了，导致找了好一会儿的错误。于是就来总结一下易错点：清除浮动

1.清除浮动应用场景（即什么时候需要清除浮动？）

平常开发时遇到这样几种情况：

1. 我们给父元素设置了高度，里面的子元素都是浮动的，那么不会影响后面的盒子
2. 给父元素没有设置高度（不确定高度时），子元素不是浮动的。父盒子通过子盒子的内容自适应高度！（即子盒子撑开父盒子，这样测试时就能看到父盒子的高度）
3. 父元素没有设置高度，子元素时浮动的！这个时候往往会影响到后面的盒子。

补充：第三种情况最常出现！有时候不得已，就不让父盒子设置高度，想让它自适应内容高度。所以，简单理解清除浮动需要的3个条件就是：

• 父级没高度
• 子盒子浮动了
• 影响下面布局，所以我们要清除浮动

ps：接下来我会总结一些清除浮动的方法，以及我比较常用的方法！

不过一般我最常用的是给父级元素添加overflow：hidden

2.接下里分别介绍清除浮动的几种方法

• 额外标签法
  
  案例：
  
  注意：新增的盒子只能是块级元素，不能是行内元素，如span标签

又称为“隔墙法”，就是在最后一个浮动的子元素后面添加一个额外标签，添加清除浮动的样式，相当于在所有浮动盒子后面加了一堵墙！

注意：实际工作可能会遇到但不常用！！

1. 父级添加overflow：hidden （常用）
   

• ：after伪元素法
  
  这种方法只需要复制删帖初始化语句里，调用即可。找到浮动的盒子进行调用即可！！
  

• 双伪元素法（本人不常用）
  
  
  还是先把代码复制粘贴初始化样式里并调用！在父盒子中写上clearfix类名进行调用！
  

3.举个栗子（我之前搞得一个移动端的页面）

当我在下面在newer盒子下面在插入一个box盒子时。显示效果为：

案例来说，应该是这样的：

但是由于上面的一些父盒子都没有设置高度，都是采用的自适应内容高度！而且每个父盒子里面的子盒子都是浮动的。所以高度无法识别！于是就会影响下面的盒子布局。

---

当我给所有的父盒子设置了overflow：hidden后就ok了

 <!-- 新人区域newer -->
        <div class="newer">
            <a href="#">
                <img src="upload/new1.dpg" alt="">
            </a>
            <a href="#">
                <img src="upload/new2.dpg" alt="">
            </a>
            <a href="#">
                <img src="upload/new3.dpg" alt="">
            </a>
        </div>
        
        <div class="box">
            <a href="#">
                <img src="upload/new1.dpg" alt="">
            </a>
            <a href="#">
                <img src="upload/new1.dpg" alt="">
            </a>
        </div>


css样式如下：
/* 新人区域 */
/* 因为newer盒子没有设置高度，而子盒子全都浮动着
，所以必定无法识别高度！而且会影响下面的盒子 */
.main-content .newer{
    overflow: hidden;
}
.newer a{
    float: left;
    /* 设置成css3盒模型，border也包含在width中 */
    box-sizing: border-box;
}
.newer a:nth-child(1){
    width: 50%;
}
/* 从第二个开始的a都是宽度25% */
.newer a:nth-child(n+2){
    width: 25%;
    /* 给后面两个a添加左边框即竖线效果
    但是第三个肯定会跑到下一行！所以把a设置成css3盒模型 */
    border-left: 1px solid #ccc;
}
.newer a img{
    width:100%;
}



.box a{
    float: left;
    width: 50%;
}
.box a img{
    width: 100%;
}