高度塌陷

  • 本来父元素是由子元素抻开的，子元素设置了浮动之后，子元素就脱离文档流了，父元素无法抻开，就会形成高度塌陷

解决高度塌陷

  • BFC
  • 父元素的垂直外边距不会和子元素重叠
  • 开启BFC的元素不会被浮动元素所覆盖
  • 开启BFC的元素可以包含浮动的子元素

如何开启BFC

  • 设置元素浮动
  • 设置元素的绝对定位
  • 设置元素为inline-block
  • 将元素的overflow设置为一个非visible的值（副作用最小的）
.box{
    border:10px red solid;
    overflow:hidden;
}

兼容IE6浏览器

hasLayout  zom:1;
©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成，浏览时请结合常识与多方信息审慎甄别。
平台声明：文章内容（如有图片或视频亦包括在内）由作者上传并发布，文章内容仅代表作者本人观点，简书系信息发布平台，仅提供信息存储服务。

推荐阅读更多精彩内容