通过博文尚美这个实验，我对当中clear属性的理解

我对清除浮动（clear）的理解

清除浮动(clear)
       clear语法：
              clear :
                       none : 默认值。允许两边都可以有浮动对象
                        left : 不允许左边有浮动对象
                        right : 不允许右边有浮动对象
                        both : 不允许有浮动对象
我第一次看到这个定义,认为clear: left是“清除左浮动”，clear: right是清除右浮动。 感觉非常容易理解，但是我实际使用时发现不是这么回事。
根据上边的基础，我做了一个简单的实验，假如页面中只有两个元素div1(a)、div2(b)，它们都是左浮动，场景如下：
    此时a、b都左浮动，根据规则，b会跟随在a后边，但我仍然希望div2能排列在div1下边，就像a没有浮动，b左浮动那样。
     这时候就要用到清除浮动（clear），根据我对上面的理解：在a的CSS样式中添加clear:right;，理解为不允许a的右边有浮动元素，由于b是浮动元素，因此会自动下移一行来满足规则。然后我试了一下我刚才的想法，结果还是如上面那样，并没有起到效果，可见这种理解是错误的。
    看来，要想让b下移，就必须在b的CSS样式中使用浮动。b的左边有浮动元素a，因此只要在b的CSS样式中使用clear:left;来指定b元素左边不允许出现浮动元素，这样b就被迫下移一行。实践效果如下：

这样就达到了效果，如果两个div都是右浮动，
可以看出b的右边有一个浮动元素a，结合上面的例子，我们可以在b的CSS样式中使用clear:right;来指定b的右边不允许出现浮动元素，这样b就被迫下移一行
接着我有创建了一个div（c），我使a,b,c全部左浮动，然后给b CSS样式中使用clear:both;
发现c并没有任何变化，由此可以发现，清除浮动(clear)只会把前边元素中设有浮动属性的元素，当作没有浮动一样对待
但是后来百度发现（clear：both）这样会增加浏览器的渲染负担，所以又百度了一下解决的办法，可以考虑使用伪元素 ::after 来代替这个空白标签，因为清除浮动需要在浮动元素后面，所以可以使用:after 设置 content:"" ，并使其 display:block 成为块级元素后 clear:both 来清除浮动。
                                            如有不对的地方，请多多包涵与指正