既然浮动元素脱离于普通文档流存在
那么就比如视频中box3与box1 box2重叠的时候
如何识别出box1 box2 在box3左侧？
如果清楚除浮动的意思是浏览器解释为该侧不存在浮动元素
弱弱的问一句此时是把浮动元素同普通文档流同样对待的意思吗？
尽管问题提出好久了，还是说下我的一点浅见吧，开始我也想着是浏览器会找出某元素左边的元素，然后处理下。不过后来自己试了下，觉得这个clear:left ,在此处并不是识别出位于某元素左侧的元素，并清除浮动效果的意思。
我的理解是，某元素设置clear：left属性，则对于该元素而言，此前设置了 float:left 的元素都可以视为“普通文档流”层，这样的话新的样式就在之前设置了float：left的元素下一行开始了。那么clear：left = “忽略之前左侧浮动元素“实现的效果，把他们视作普通文档流实现的。
貌似样式和文档是是分离的，举个例子，题主截图例子中，假设div3中有文字（文字们本来位于div的左上角），如果div3不设置clear：left ，那么样式会像上图一样显示（重叠），但是div3中的文字则不然，文字此时不会在div的左上角。这时，当设置了所谓“忽略左侧浮动元素“效果clear：left 后，把之前元素的效果都当做是普通文档流的效果，这样样式会另起一行，而文字也会显示正常了。
同理，为什么clear属性还有一个right，一样的，也不是根据位置来分的，那就是”忽略右侧浮动元素效果”，即，对于设置clear:"rught”的当前元素而言，所有的右侧浮动效果(float:right)，都视作普通文档流实现，所谓忽略浮动。
是把浮动元素看做是普通文档流