在css什么塌陷，css float 高度塌陷

CSS盒模型与边距重叠

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

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

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

4、外边距是盒子周围一圈看不到的空间。它会把其他元素从盒子旁边推开。 外边距属性值可以为正也可以为负。设置负值会导致和其他内容重叠。

5、当box-sizing：border-box；时，此时设置元素的width和height即为设置盒子的width和height。

相关问答

Q1: 解决高度塌陷的问题和父子元素外边距重叠问题

一开始box1有个子元素box2，还有个兄弟元素box3，box2因为有浮动，所以出现了塌陷问题，如图 现在给box2添加一个兄弟元素box4，即给box1添加一个无内容的子元素，给这个子元素设置清除浮动，父元素高度也会被撑开。

（1）最简单，直接，粗暴的方法就是盒子大小写死，给每个盒子设 定固定的width和height ，直到合适为止，这样的好处是简单方便，兼容性好，适合只改动少量内容不涉及盒子排布的版面。

首先我们先看出现外边距塌陷的三种情况：当上下相邻的两个块级元素相遇，上面的元素有下边距margin-bottom，下面的元素有上边距margin-top，则它们之间的垂直距离取两个值中的较大者。

那么外边距会塌陷。子元素多余的外边距会被父元素的外边距截断。可以看到 1 和 2，2 和 3 之间的间距不是 50px，发生了边距重叠是取了它们之间的最大值 30px。假设有一个空元素，它有外边距，但是没有边框或填充。

这会导致父元素的高度无法正确计算，从而导致父元素高度塌陷。这种情况下，父元素的背景色或边框可能无法正确显示，影响页面的美观性和完整性。通过清除浮动，可以解决这个问题，确保页面元素的高度正确计算。

清除浮动问题：当元素使用了浮动属性（float）时，容器的高度可能无法正确计算，导致内容溢出容器。通过给容器设置“overflow：hidden”，可以清除浮动造成的布局问题，使容器正确地包裹浮动元素。

Q2: css高度塌陷

在文档流中，父元素的高度默认是被子元素撑开的，即子元素多高，父元素多高。但是为子元素设置浮动后，子元素会完全脱离文档流，此时会导致子元素无法撑起父元素，父元素高度塌陷。

避免父元素高度塌陷的方法：加一个空div标签清除浮动(缺点：不利于优化，优点：兼容性强) overflow+zoom（优点：兼容性强。缺点：对margin属性有影响，不能设负值，设负值无效。负值绝对定位也不可以。

相比于这样的效果，我们更希望即使子元素设置为浮动，但父元素依然可以包裹住子元素（或者说是有着子元素的高度，不至于塌陷）。

而子元素设置了浮动的属性，子元素就会跳出父元素的边界（脱离文档流），尤其是当父元素的高度为auto时，而父元素中又没有其它非浮动的可见元素时，父盒子的高度就会直接塌陷为零， 我们称这是CSS高度塌陷。

方案一：给元素设置float：left，缺点高度塌陷，要清除浮动。

将一个盒子向右浮动，可以通过设置CSS的float属性来实现。具体的做法是，在CSS样式表中为盒子添加float：right；的属性值。这样设置之后，盒子就会向右浮动，并且其后面的元素会自动向上移动，以便腾出空间。

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