浏览器-高度塌陷问题

简单总结下高度塌陷问题,加入一些自己对于该问题的思考

最近一直专注于JavaScript方面的知识总结,反而在一定程度上忽略掉dom相关问题,页面铺设本身也是前端开发必备技能,不应随着JavaScript权重提升而忽略.这次本糖想谈谈一个比较老的问题,高度塌陷.

一 定义

父级元素在不设置指定高度的情况下, 其高度默认是由其中的子元素撑起,当子元素脱离父级所在的文本流时,会导致父级元素高度坍塌.

一旦出现高度塌陷,那么父级元素下面的兄弟元素就会上移,影响到页面布局

二 产生场景

1. 子元素浮动 float;
2. 子元素定位 position:absolute position:fixed;

三 解决办法

1 父元素设置高度

尽管这个解决办法看起来跟扯犊子似的,但是不也解决了父元素没有高度的问题了嘛

2 父元素与子元素处于同一文本流

如果子元素设置浮动,那么父元素也设置浮动,子元素设置定位,父元素也定位,让父元素和子元素在同一文本流.这个也有点扯,父元素的父元素不就又产生高度塌陷了,很显然这也不是好的解决办法

3 转成inline-block行内块元素或overflow非默认值

.parent {
        width: 100%
        display: inline-block;
        overflow: auto;
}

用的是BFC特点,会将浮动元素的高度计算在内,来避免高度坍塌,这种方式只能解决子元素是通过浮动产生的高度塌陷问题

四 其它想说

1 为何现在很少提到高度塌陷这一问题

不仅仅是上面提到的解决办法,还有利用伪元素来清除浮动等等;我们研究这个高度塌陷,永远离不开一种情况就是子元素浮动问题;现在我们很少提到高度塌陷很大一部分原因是我们不再采用浮动而是使用弹性布局,极大的方便了页面布局,当然也就避免因为浮动而产生的各类问题;至于元素定位,在页面布局掌控中一定注意定位的使用规范,避免出现一个页面所有元素都是定位出来的,那样绝对爆炸

2 BFC概念

上面提到BFC的特点在一定程度上解决了因浮动而产生的高度塌陷问题,其实BFC在处理margin属性重叠(毗邻的多个盒元素的margin共享)也会起到作用

所谓BFC就是块级格式上下文，BFC是一个独立的区域，不会影响其他的区域的布局，每一个被BFC元素的子元素不会对外面的元素产生影响

触发条件如下

网上找来一个表格,作为参考;

之所以突然想总结这一古老的问题,是因为有一个群友说他最近面试有被问到这个问题,本糖也是一愣,看来现在越来越多的企业对技术人员的基础知识储备越来越看重,我们平时在学习使用新框架新工具的同时,也不要忘记多巩固自己的基础知识,毕竟未来的技术发展也都是基于最基础的技术进行拓展