css为什么会塌陷

CSS布局中常常会出现塌陷的现象，特别是在使用浮动布局时，经常会遇到这个问题。

/* 代码1 */
.outer {
  border: 1px solid red;
}
.inner {
  float: left;
  width: 100px;
  height: 100px;
  background-color: blue;
}

上面的代码1中，我们希望一个框旁边浮动一个红色框。结果发现红色边框没有显示出来，这是因为浮动元素脱离了文档流，导致其父元素高度塌陷。解决方法是为父元素添加清除浮动样式。

/* 代码2 */
.outer:after {
  content: '';
  display: block;
  clear: both;
}

代码2中，我们在父元素后添加一个伪元素，并设置其为块级元素，再使用清除浮动样式，就可以解决父元素高度塌陷的问题了。

但是，当父元素内部再次出现浮动元素时，还会出现相同的问题。

/* 代码3 */
.outer {
  border: 1px solid red;
}
.inner1 {
  float: left;
  width: 100px;
  height: 100px;
  background-color: blue;
}
.inner2 {
  float: left;
  width: 100px;
  height: 100px;
  background-color: green;
}

上面的代码3中，我们希望两个蓝色框并排放在一起。结果发现两个框跑到了父元素的外边，这是因为父元素的高度还是没有计算浮动元素的高度，而浮动元素又彼此影响，最终导致父元素高度塌陷。解决方法是改变其中一个浮动元素的位置，让其放在父元素的下方，并设置clear属性。

/* 代码4 */
.inner1 {
  float: left;
  width: 100px;
  height: 100px;
  background-color: blue;
}
.inner2 {
  clear: left;
  float: left;
  width: 100px;
  height: 100px;
  background-color: green;
}

代码4中，我们先让蓝色框浮动，而绿色框则放在蓝色框下方，并设置清除浮动样式，这样就可以避免高度塌陷问题了。

综上所述，CSS布局中遇到高度塌陷问题，需要注意浮动元素的显示不会影响父元素的高度，需要适时使用清除浮动和改变元素位置等方法来解决问题。