高度塌陷的原因:当前盒子没有高度,且内部元素脱离文档流,导致没有元素可以撑起盒子。(当元素设置了浮动或者绝对,固定定位时,都会导致元素脱离文档流)
解决办法:
- 给盒子设置高度
- 为盒子添加一个不脱离文档流的子元素,让这个子元素将盒子撑起
- 解决浮动带来的高度塌陷:
创建BFC:- 设置父元素overflow属性为非默认值 (即除了visible之外的值,如:hidden/auto/scroll) 但设置此属性可能会导致一些问题,当值为auto时可能会出现滚动条;值为hidden时会导致溢出元素不可见...
- 给父盒子也设置浮动
- 将父盒子设置为行内块结构 inline-block
- 更多方法可以看块格式化上下文 - Web 开发者指南 | MDN