产生高度塌陷的原因是浮动产生的。
如图,由于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属性,完美解决了。