高度坍塌及解决

高度坍塌

什么是高度坍塌？

常规流盒子的自动高度，在计算时，不会考虑浮动盒子

如图：紫色盒子设置了CSS样式float:left（左浮动），而灰绿色的盒子未设置浮动，是一个常规流盒子。灰绿色盒子在页面上排列时，会自动忽略前面的紫色盒子（浮动盒子），造成高度坍塌

解决

那么如何解决高度坍塌问题？

可以利用一个CSS属性：clear 来清除浮动

• 默认值：none
• left：清除左浮动，该元素必须出现在前面所有左浮动盒子的下方
• right：清除右浮动，该元素必须出现在前面所有右浮动盒子的下方
• both：清除左右浮动，该元素必须出现在前面所有浮动盒子的下方

使用示例：

为上面例子中灰绿色盒子的CSS样式之中加上clear属性

可以看见这时灰绿色的常规流盒子又重新”考虑“到了浮动盒子的高度了