清除浮动Clear的正确理解

一、关于w3school 是这样描述的

图像的左侧和右侧均不允许出现浮动元素：

img
  {
  float:left;
  clear:both;
  }

亲自试一试

设想下这样的情景，假设有 a, b ,c  3个div元素利用浮动属性float=left; 变成一字排开，如下图

<style>
  div{    
    float: left;
  }        
</style>

<div id="div-a">a</div>
<div id="div-b">b</div>
<div id="div-c">c</div>

现在我们要求是b另起一行，如下图：

根据w3school描述想到的是‘a元素右边不允许出现浮元素就ok啦’， a元素补上样式clear: right

<style>
  div{    
    float: left;
  }        
  
  #div-a{
    clear: right;    
  }
</style>

<div id="div-a">a</div>
<div id="div-b">b</div>
<div id="div-c">c</div>

结果是 ”一点没变“

最终告度娘找到这篇 《CSS浮动(float,clear)通俗讲解》 里面有这样一句话：
  对于CSS的清除浮动(clear)，一定要牢记：这个规则只能影响使用清除的元素本身，不能影响其他元素。

将样式改成：

<style>
  div{    
    float: left;
  }        
  
  #div-b{
    clear: left;
  }  
</style>

<div id="div-a">a</div>
<div id="div-b">b</div>
<div id="div-c">c</div>

效果：

成功了