CSS之高度塌陷和外边距塌陷

目录

1.高度塌陷(原因,如何解决)

【概念介绍】

【解决办法】

【概念介绍-BFC】

【拓展-BFC的触发条件】

2.外边距塌陷 (原因,如何解决)

【概念介绍】

【两种情况】

1.相邻块元素

2.嵌套块元素

【解决办法】

一、相邻块元素

二、嵌套块元素

总结:


1.高度塌陷(原因,如何解决)

【概念介绍】

高度塌陷:子元素设置浮动后就会脱标(脱离标准流进入浮动流),如果此时父元素没有设置高度,那么父元素高度就会为0,形成所谓的父元素高度塌陷现象

引发的后果:浮动的子元素会对页面的布局造成影响,需要清除浮动。由此得出,解决高度塌陷的本质是清除浮动造成的影响

【图示】

子元素浮动前:

img

子元素浮动后:

img

【解决办法】

(1)给父元素一个高度

做法:直接计算出父元素的高度,给父元素定高

缺点:当子元素过多的时不好计算

(2)利用BFC解决

(3)清除浮动造成的影响

做法:清除浮动的方法

详情请看:清除浮动的方法有哪些

【概念介绍-BFC】

BFC(Block Formatting Context,块格式化上下文) 是Web页面的可视化CSS渲染的一部分,是页面中的一块渲染区域,有自己的渲染规则,它决定了其子元素将如何定位,以及和其他元素的关系和相互作用。

其特性之一:bfc中的浮动元素参与bfc的高度计算,所以可以将父元素变为bfc模式,解决高度塌陷

做法:

a.给父元素设置浮动(此时父元素有高度,但是父元素本身也脱标了,会产生其它的布局问题)

b.给父元素的显示模式设置为inline-block、table-cell、table-caption、flex、inline-flex

c.给父元素overflow设置为非visible(常见做法就是overflow:hidden)

d.设置绝对定位和固定定位

【拓展-BFC的触发条件】
 1、根元素(<html>)
 2、float值非none
 3、overflow值非visible
 4、display值为inline-block、table-cell、table-caption、flex、inline-flex
 5、position值为absolute、fixed

2.外边距塌陷 (原因,如何解决)

【概念介绍】

垂直方向上的两个块级元素外边距出现了合并的现象,就叫外边距塌陷(水平方向上的元素没有外边距塌陷现象)

【两种情况】

垂直相邻块元素和嵌套块元素 都会产生该现象

【图示】

1.相邻块元素

img

2.嵌套块元素

img

【解决办法】
一、相邻块元素

(1)不用margin,选用padding

操作:让其中某个元素的margin变成padding,因为padding不存在塌陷

(2)中间加个空标签隔开

操作:让空标签的高度为两者margin之和

(3)只给一个元素设置margin

操作:只给其中一个元素设置margin,就不存在外边距塌陷了

(4)改变元素的显示模式

操作:改变其中一个块元素的显示模式为行内块元素

缺点:改变了元素的显示模式,可能产生其它的问题

二、嵌套块元素

(1)更改元素显示模式。

操作:改变其中一个块元素的显示模式为行内块元素

缺点:改变了元素的显示模式,可能产生其它的问题

(2)更改元素的文档流。

操作:给其中一个元素设置浮动,脱离标准流,就能解决

缺点:脱标元素会对后面的元素造成影响

(3)给父元素设置溢出隐藏 (推荐)

操作:设置overflow:hidden

(4)给父元素设置(上)内padding

操作:给父元素设置一个上内边距,使其和子元素保持距离

缺点:可能造成其它子元素的位置发生改变

(5)给父元素设置(上)边框

操作:给父元素一个边框,让子元素的margin-top以这个边框为准

缺点:多了个边框,影响美观

注意:定位能实现效果,但是,与本题关系不大。本题主要探讨的是使用margin-top实现效果的时候会产生问题,要怎么解决这个问题(现象)

总结:
  1. 高度塌陷是因为父元素没有设高,而子元素浮动脱标,造成父元素高度为0产生塌陷。

常见的解决办法:

1.给父元素设置高度

2.设置父元素的显示模式为flex

3.设置父元素overflow为hidden

  1. 外边距塌陷 分为嵌套盒子塌陷兄弟盒子塌陷

对于嵌套盒子,常见的解决办法就是利用父盒子的padding,实现分离的效果

对于兄弟盒子,常见的解决办法就是只给一个盒子设置margin,就可以了