前端基础问题 -- 高度塌陷问题详解(面试重点问题)

本文深入探讨了CSS中常见的高度塌陷问题,解析了其产生的原因与原理,并提供了多种有效的解决方案,包括设置浮动、绝对定位、inline-block及推荐的overflow:hidden方法。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

高度塌陷:

父元素的高度,默认被子元素撑开,目前来讲son多高,father就多高。此时如果子元素设置浮动,则会导致其完全脱离文档流,子元素脱离文档流将无法撑开父元素,导致父元素的高度丢失,就是我们说的高度塌陷问题。父元素一旦高度塌陷,则它下边的元素会向上移动,导致整个页面的布局混乱!

例如,我们常常想要图一:
在这里插入图片描述
但是,输出的总是图二:
在这里插入图片描述

原理:
在w3c标准(非IE6以下版本采用的是W3C标准)中,每一个元素会有一个隐藏的属性,即BFC(块级格式化上下文),该属性在默认情况下是关闭的。

当BFC开启的时候回获得以下特性:

    1.父级元素的内外边距不会与子元素重叠
    2.开启后不会被浮动元素所覆盖
    3.开启后可以包含浮动子元素

解决方法:

  • 直接将父级元素的长宽写死
    缺点:当子元素的大小发生改变时,父级元素不能够自适应

  • 2.为父级元素设置浮动
    一般出现高度塌陷大多是由于浮动引起的
    缺点:当设置浮动后父级元素宽度会跟着发生改变

  • 3.设置绝对定位

  • 4.设置元素为inline-block

  • 5.将overflow属性设置为hidden(推荐使用)
    此方法相对于其他方式来说,副作用最小。

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值