CSS不设置高为什么底部上移了

使用CSS时，我们有时会遇到一个奇怪的情况——当我们不给一个元素设置高度时，它的底部会出现上移的情况。这是为什么呢？

代码示例：
.element {
  background-color: #333;
  color: #fff;
  margin: 0 auto;
  width: 200px;
} 

如上代码中的元素，没有设置其高度，但是在页面中该元素的底部似乎上移了一些，导致它和其他元素之间的间隔不对齐。

这是因为当一个元素没有设置高度时，其高度会默认为内容所占据的高度。如果它的内容没有撑开它的高度，那么它的底部会和内容的底部对齐。而如果这个元素有一个底部的外边距（margin-bottom），那么这个外边距会影响它的父元素的高度，导致整个元素的底部上移。

解决这个问题有几种方法：

代码示例：
.element {
  background-color: #333;
  color: #fff;
  margin: 0 auto;
  width: 200px;
  height: auto; /* 或者 height: 100%; */
  overflow: hidden; /* 或者使用其它清除浮动的方法 */
} 

第一种方法是给这个元素设置 height: auto 或者 height: 100%，由于没有任何内容超出该元素的高度，因此它的高度会自动匹配内容的高度，避免了上移的情况。

第二种方法是使用 overflow: hidden，这会让元素的高度自动扩展以适应内容，并且能够清除浮动，从而避免了浮动元素导致的高度问题。

总之，我们需要在使用CSS时注意元素的高度属性，避免浮动、外边距等问题导致元素的底部上移。同时，掌握与理解CSS的常用属性以及属性的默认值，有助于我们更好地解决问题。