高度塌陷

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

解决高度塌陷

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

如何开启BFC

  • 设置元素浮动

  • 设置元素的绝对定位

  • 设置元素为inline-block

  • 将元素的overflow设置为一个非visible的值(副作用最小的)

      .box{
                border:10px red solid;
                overflow:hidden;
            }
    

兼容IE6浏览器

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

相关阅读更多精彩内容

  • 高度塌陷: 在文档流中,父元素的高度默认是被子元素撑开的,也就是子元素多高,父元素就多高 但是当为子元素设置浮动以...
    啊烟雨阅读 625评论 0 0
  • 什么是高度塌陷 在文档流中,父元素的高度默认是被子元素撑开的,也就是子元素多高,父元素就多高但是当为子元素设置浮动...
    你猜_e00d阅读 1,644评论 1 0
  • 高度塌陷 父元素包含的子元素,子元素多高。父亲没指定,默认子元素高。子元素设置浮动以后,子元素脱离文档流,此时子元...
    YU不忘初心阅读 9,550评论 0 1
  • 高度塌陷 高度塌陷,理解字面意思就是高度坍塌了,不存在了 解决塌陷 当我开启Block Formatting Co...
    甚得朕心阅读 543评论 0 1
  • 我16年参加工作,至今已经快两年了,两年里感觉自己成长甚微,但是失去却颇多。 这是我当班主任的第二个学期,以前...
    李_0d56阅读 376评论 0 0

友情链接更多精彩内容