css解决高度塌陷最优方案（清除浮动）----原理

产生高度塌陷的原因是浮动产生的。

如图，由于box1的浮动，其父元素产生了高度塌陷的问题。在之前的时候介绍clear来清除浮动。那么，clear清除浮动的原理是什么呢？原理是浏览器会根据浮动所产生的影响为元素加入一个外上边距。

如图。box3由于box1的浮动，被覆盖了。但是如果我们为box3加入一个clear属性，就会清除浮动，其原理是这样的：我们为box3添加clear:left的时候，浏览器会判断box1的高度，然后隐式为box3添加一个margin-top属性，其值等于box1的高度，但是我们调试的时候又不会被看出来。同理添加clear：right，也一样。有必要说明一下，添加clear：both的时候，是按照左右两侧高度最高的那个来进行清除浮动的，比如在此案例中，box1的高度小于box2的高度，那么在设置clear：both，之后，浏览器默认按照box2的高度为box3的margin-top的大小。


那我们来看一下这个代码：

如果我们添加一个box2盒子，并且按照我们之前说的clear清除浮动的方法，就可以解决问题了，但是我们知道这是在html里面添加的，我们要想用css实现同样的效果，我们想到了伪元素after,在盒子的末尾添加内容，如图：

因为伪元素是行内元素，我们需要转换成块元素，另外就是，我们把里面的内容清理一下，用content内容属性改成空，因为我们在里面添加文字没啥用，还占据高度。再结合clear属性，完美解决了。