以下均是自己的一些理解,希望如果有大神看到不足之处还请多批评指责,刚入门前端,算是自己做的一个小笔记。
经常看到有人使用clear:both清除浮动,开始就是跟着用,现在发现自己都不知道这个东西什么意思,就用来使用,应该搞清楚它清浮动的原理之类,于是查了些资料,就来这里胡说八道一番。
- 元素被设置为float之后,会产生display:inline-block和高度塌陷的特性,那么一般就是咱们所看到了外层的div没有高度,里面的float内容溢出。就是这个原因导致的。
- 那么为什么用这种clear方式解决呢?clear本身的意思是,不允许此元素left或者right或者both(left+right)有float元素,这样此元素会自动换到下一行。我们常见的做法是在float元素后面加一个空白元素,并设置它clear:both。这样设置后,此元素两边不能有float,因此,它自动换到下一行,处于第二行,虽然高度塌陷,但是对于外部div来说,要包裹住这个空白div,需要将第一行和第二行都包裹进去,而第二行只有一个元素,那就是那个空白元素,虽然空白,没有空间,但是确实存在,只是不占位置而已,所以设置之后,外层div包裹了第一行加第二行,第一行高度就是float那一行元素的最高的元素(这里跟高度塌陷其实并不矛盾,当然这里只是我的个人理解,对我来说还算说得过去,应该是有更合理的解释),这样看起来就像是解决了高度塌陷的问题一样啊。