CSS 为什么要清除浮动与以及清除浮动的应用场景(clear: both; 相关)

为什么清除浮动？:多少情况下，父盒子A是不方便给固定高度的(因为里面的子盒子a1和子盒子a2的内容是动态的,所以自动会把父盒子A撑开，因此不需要给定高度)。而子盒子a1和子盒子a2设置浮动后，子盒子就不占原文档流的位置，就会造成父盒子A高度为0，就影响了下面的标准流盒子(A的兄弟,为B)的布局。
清除浮动的应用场景？:父盒子没有设定高度并且父盒子里面的子盒子设置了浮动(有嵌套关系也是一种前提哦)，这种情况下，如果影响了下面的 相邻的 兄弟盒子的布局，此时要对父盒子设置清除浮动。(注意：如果浮动的盒子C和未浮动的盒子D处于同级，那么C、D最好都设置浮动或者都不设置浮动，否则你是纯属给自己找麻烦玩。因为应用场景是前面那段话(未设定高度+有嵌套关系+嵌套的子盒子设置了浮动))
清除浮动的代码写在哪个标签上？：如果先从B盒子开始布局错乱，就向上寻找和B盒子相邻且同级的A盒子，只需对A盒子增加一个伪类，然后将清除浮动的代码写在这个伪类中。
清除浮动的代码如下：

.clearBoth:after {
      content: ""; 
      display: block; 
      height: 0; 
      clear: both; 
      visibility: hidden;
}   
.clearBoth {
  *zoom: 1;
}

标准文档流与清除浮动与的显示效果区别:

image.png

标准文档流写法：

    
    
    
    




    

        
a1
        
a2
    
    
B
   

• 标准文档流的效果截图

  
  
  image.png

浮动写法(没有清除浮动)：

    
    
    
    




    

        
a1
        
a2
    
    
B

• 没有清除浮动的效果截图

  
  
  image.png

---

浮动写法(清除浮动的写法)：

    
    
    
    




    

        
a1
        
a2
    
    
B
   

• 清除浮动的效果截图

  
  
  image.png

---