防止父元素高度坍塌 4种方案
父元素的高度都是由内部未浮动子元素的高度撑起的。
如果子元素浮动起来,就不占用普通文档流的位置。父元素高度就会失去支撑,也称为高度坍塌。
即使有部分元素留在普通文档流布局中支撑着父元素,如果浮动 起来的元素高度高于留下的素。那么浮动元素的高度会超出父元素边框。
方案一:为父元素设置 overflow: hidden 属性。
原理:CSS中的overflow :hidden属性会强制要求父元素必须包裹住所有内部浮动的元素,以及所有元素的margin范围。
缺点,如果刚好父元素有些超范围的子元素内容需要显示(比如,个别position定位的子菜单项),不想隐藏,就会发生冲突。
方案二: 在