css元素为什么会塌，css高度塌陷的原因

CSS盒模型与边距重叠

1、可以看到 1 和 2，2 和 3 之间的间距不是 50px，发生了边距重叠是取了它们之间的最大值 30px。假设有一个空元素，它有外边距，但是没有边框或填充。

2、外边距是盒子模型中的一个属性。在使用外边距时，有可能会发生外边距重叠。知识剖析 外边距合并指的是，当两个垂直外边距相遇时，它们将形成一个外边距。

3、将浏览器默认的标准盒模型改为替代盒模型 margin可以有负数，而padding不可以为负数。 负数意味着样式会重叠入侵。

相关问答

Q1: CSS—嵌套块元素外边距合并导致的塌陷(3种处理方法)

1、取两个值中的较大者这种现象被称为相邻块元素垂直外边距的合并。解决方案： 尽量只给一个盒子添加 margin 值。

2、解决方法： 1 给父盒子设置边框 2给父盒子overflow：hidden；d)行内元素不要给上下的margin 和padding上下margin和padding会被忽略。左右margin和padding会起作用。

3、第二种解决方案：给父元素用css样式添加一个伪类，设置一个空内容然后清除浮动。例：box1有个子元素box2，当box2没有高度时，box1高度就只有2个border的高度，没有被子元素撑开。

4、这种情况是常见的外边距合并问题。方法一：给白色背景的盒子加上padding，方法给白色北京盒子加上边框，很细的白色也行，就不会看出来了。

Q2: 布局中造成盒子塌陷的原因是什么?怎么解决塌陷问题?

父子元素塌陷：父子元素之间也会出现margin塌陷，（1）父元素和子元素都设置了同方向的margin-top值，两个属性之间没有其他内容进行隔离，导致两个属性相遇，发生margin塌陷。

解决方法：尽量只给一个盒子添加margin值 对于两个嵌套关系的块元素，如果父元素没有上内边距及边框，父元素的上外边距会与子元素的上外边距发生合并，合并后的外边距为两者中的较大者。

解决方案： 尽量只给一个盒子添加 margin 值。嵌套块元素垂直外边距的塌陷 第一种：对于两个嵌套关系（父子关系）的块元素，父元素有上外边距同时子元素也有上外边距，此时父元素会塌陷较大的外边距值。

Q3: css知多少(9)--float下篇_html/css_WEB-ITnose

1、先介绍两个比较简单，但是不常用的解决方法：为父元素添加overflow：hidden 浮动父元素这两个方法比较简单，在这里也就不再演示了，大家有兴趣的可以自己去试试。第三种方法也不是很常用，但是大家要知道clear：both这个东西。

2、常见的有 float：left 或者 float：right 。简单点来说，前者是左浮动(往左侧向前边的非浮动元素飘，全是飘得元素的话，就按照流式来浮动从左到右，放不下则换行)，后者是右浮（往右飘）动。

3、第一种方式： 因为浮动框不在普通的文档流中，所以它不占据空间。

4、方法一：float+margin 思路：左边浮动，右边加上一个margin-left值，即可实现左边固定，右边自适应布局。

5、举例 body { richness： 75 }border-collapse：设置或检索表格的行和单元格的边是合并在一起还是按照标准的HTML样式分开。

6、《css知多少》系列就此完结了。常来光顾的朋友可能会觉得突然：css的知识点还有很多，怎么突然就完了，还没讲完呢？这样说是对的。不过凡事都有一个定位，如果盲目求多，定位模糊，那样就没有目的没有方向了。

css元素为什么会塌的介绍就聊到这里吧，感谢你花时间阅读本站内容，更多关于css高度塌陷的原因、css元素为什么会塌的信息别忘了在本站进行查找喔。