有没有前端大神帮忙解释一下clear:both的原理啊！急需！

Question

这个原理倒是略之一二，但是很混乱。尤其是在父元素上添加了clearfix:after{clear:both;.....} 这样的样式之后，为什么父元素的高度就恢复了。这个不怎么能想通，麻烦大神帮忙解惑。

Answer 1

对一个元素声明clear:both，会将来自元素周围的的浮动清除，举一个简单的例子就是当先声明一个元素向左浮动时，那么这个元素的右边就会留出一部分空白，如果这个时候空间可以容下该元素的下一个元素的大小，那么由于此元素声明过浮动向左，那么下一个元素就会自动弥补留下的空间。那么相对这个补缺的元素（本身没有声明浮动），它有一个来自他左方的浮动，如果这个时候对这个补缺的元素声明clear: both;那么它就会忽略上一个元素的浮动声明而不去补之前的空缺。回到题主的问题，由于浏览器是按顺序render（这个我也不好翻译。。）元素的，对#div1和#div2都声明了浮动向左，那么这个时候#div1之前是没有其他浮动元素的，clear：both并不会对之后的#div2产生影响，而相对#div2，由于它之前的#div1声明向左浮动，也就给#div2留出了一部分空间，那么由于#div1声明的向左浮动，#div2默认会自动补全，这个时候再对#div2声明clear:both就会起作用，它就跑到下面去了。至于楼上的第一个例子为什么管用，是因为他限制了parent元素的宽为100pixel,即使#div1向左浮动，也没有空间给#div2补全了，所以#div2只能跑下面去。

Answer 2

浮动的初衷是让文字环绕图片用的，即 使用float名值对后，后面元素内容小于 空缺大小的元素会自动往上补进。 后来由于开发者注意到 浮动元素中间没有间隙于是就用来做布局了。                                         那么问题来了：当父盒子（未设置高度）中有两个浮动的盒子时，这两个子盒子脱离文档流，父盒子高度坍塌了，这时 我们衍生出了一个clear:both/left/right；名值对解决了这个问题。 在浮动元素后面加一个块元素，定义一个名值对clear：both；坍塌的父盒子会找到具有这个属性的元素，并且与这个元素同高 ，你说的这个.clearfix:after{clear:both;.....}  其中clearfix是类名，加了个块状的伪元素而已  作用跟直接加块元素没区别