CSS-面试题:盒子塌陷的原因与解决方式

盒子塌陷的原因？解决方式

• 原因
  • 情况一：浮动元素无法撑开标准流的父元素，导致父元素高度塌陷
  • 解决方法：
    • 1.直接给父元素设置该高度
    • 2.使用额外标签法清除浮动
    • 3.使用单伪元素清除法
    • 4.使用双伪元素清除法
    • 给父元素设置overflow:hidden
  • 情况二：互相嵌套的块级元素，给子元素设置margin-top，父子元素的margin-top会合并，父元素会一起往下移动
    • 1.给父元素设置border-top
    • 2.给父元素设置padding-top
    • 3.设置浮动
    • 4.转换成行内块元素
    • 5.给父元素设置overflow:hidden