说说css clear属性

以下均是自己的一些理解，希望如果有大神看到不足之处还请多批评指责，刚入门前端，算是自己做的一个小笔记。

经常看到有人使用clear：both清除浮动，开始就是跟着用，现在发现自己都不知道这个东西什么意思，就用来使用，应该搞清楚它清浮动的原理之类，于是查了些资料，就来这里胡说八道一番。

• 元素被设置为float之后，会产生display：inline-block和高度塌陷的特性，那么一般就是咱们所看到了外层的div没有高度，里面的float内容溢出。就是这个原因导致的。
• 那么为什么用这种clear方式解决呢？clear本身的意思是，不允许此元素left或者right或者both（left+right）有float元素，这样此元素会自动换到下一行。我们常见的做法是在float元素后面加一个空白元素，并设置它clear:both。这样设置后，此元素两边不能有float，因此，它自动换到下一行，处于第二行，虽然高度塌陷，但是对于外部div来说，要包裹住这个空白div，需要将第一行和第二行都包裹进去，而第二行只有一个元素，那就是那个空白元素，虽然空白，没有空间，但是确实存在，只是不占位置而已，所以设置之后，外层div包裹了第一行加第二行，第一行高度就是float那一行元素的最高的元素（这里跟高度塌陷其实并不矛盾，当然这里只是我的个人理解，对我来说还算说得过去，应该是有更合理的解释），这样看起来就像是解决了高度塌陷的问题一样啊。