关于清除浮动的理解clear:both,clear:left,clear:right

1. clear

图像的左侧和右侧均不允许出现浮动元素
clear 属性规定元素的哪一侧不允许其他浮动元素。
clear 属性定义了元素的哪边上不允许出现浮动元素。在 CSS1 和 CSS2 中，这是通过自动为清除元素（即设置了 clear 属性的元素）增加上外边距实现的。在 CSS2.1 中，会在元素上外边距之上增加清除空间，而外边距本身并不改变。不论哪一种改变，最终结果都一样，如果声明为左边或右边清除，会使元素的上外边框边界刚好在该边上浮动元素的下外边距边界之下。

• 上面这个是w3school对clear这一个属性的说明。
• 但是我觉得有很大的歧异，下面我用案例来深入理解一下clear这个属性。

2. clear:left 的元素左侧不允许有浮动

效果图：

image

那么现在
我们有三个左浮动的盒子，如果想让第二个盒子在新的一排显示，那么就要用到我们的 clear: left 不允许该元素左侧有任何的浮动只需要在 .box2上加上 clear:left便可以实现效果

效果图：

image

---

那么，我们想要让第二个绿色的盒子的左右两侧都不允许有浮动元素，也就是让三个盒子类似于标准流的显示方式，我们使用clear:both就可以了么？
假想图：

image

3. clear: both 无法清除当前元素右侧的浮动对象

clear 无论在何种情况下（clear:left,clear:right,clear:both）都只能让作用了clear属性的标签的前面的标签起到效果。

非常疑惑，那岂不是只能清除掉左侧的浮动对象咯，clear:both和clear:right有什么用咯？
我们还是拿刚才的案例，不过不同的是，我们让所有的div右浮动
效果图：

image

现在！！！！！！！！！！
我们让第二个盒子的右侧不允许有浮动的元素出现，我们就要用到 clear:right或者 clear:both了

image

    
    
    
    
    



    

        
1
        
2
        
3
    

4. 总结

• 无论是both，还是left，还是right。clear始终无法处理他后面的元素，你要问为啥不行啊 ，我就要清掉，那我想和你说，你左右都清掉何必还用浮动哇。。。。
  顺便吐槽一下w3school的苹果

  
  
  

  image
  
  

  让我想到了

  
  
  

  image
  
  所以干嘛要在物品上画笑脸啊 ，怪吓人的！