CSS 浮动过后带来的影响

情景一：

    
    
    
    
    



    
22
    
333

这时的页面结构：

情景1.png

这时，可以明显看出问题，我们只给22这个盒子添加了左浮动的属性，但是发现3号盒子跑到了2号盒子下面。我们知道float会让原本的元素脱离普通流。
如下图，我们可以立体的展示这一过程。
假如两个盒子都不添加浮动：

橡皮代表2号 本子代表3号盒子.png

然后，给2号盒子添加左浮动

2.png

这就是浮动的一种理解。但是假如我们在盒子里写上内容会怎样
看图。（出现上图的情况前提是3号盒子宽高要不小于2号盒子）

盒子内写好内容.png

发现文本333被挤开了，并没有直接跑到22下面。
这其实就是浮动带来的麻烦，那么怎么清楚浮动带来的影响呢？
1、给盒子3添加clear属性（left right both）,三个属性分别用来清楚左浮动，右浮动和两边都清除。
2、给盒子3添加overflow:hidden样式。
比较精密的设置是：
设置专门的类用于解决此类问题

    
    
    
    
    


    

        
1
        
22
        
333
    
    
哈哈哈哈哈哈哈哈哈哈哈哈

代码中的father类选择器的作用，将其中盒子剩下的部分全部占满，一次达到清除浮动的影响。

参照图.png

在其他前端框架中是怎么清除的
Bootstrap中

.clearfix {
  *zoom: 1;
  &:before,
  &:after {
    display: table;
    content: "";
  }
  &:after {
    clear: both;
  }
}

使用方法：

参考文章：
对overflow与zoom”清除浮动”的一些认识
那些年我们一起清除过的浮动