详解关于浮动元素float使其父元素高度塌陷的原因及解决方法

浮动元素使其父元素高度塌陷我们经常会遇到一种情况,给一个元素设置浮动之后 float:left/right;,如果该元素的父元素有背景颜色,那么会发现父元素的背景颜色消失了;如果父元素有一个边框,那么浮动元素无法将边框撑开。 从以上两张图中可以看出添加浮动元素后,li元素按照规则横向排列,但是父元素却消失不见了。 为父元素添加一个5px的边框,在li元素添加浮动后,边框并没有被内容撑开。 在第一个示例中仿佛父元素消失了,但在第二个示例中发现其实父元素并没有消失,只是高度被计算为0。这就要回到浮动元素的特性来说明此问题“当元素设置浮动后,会自动脱离文档流”,翻译成白话就是说,元素浮动后