css中float的height获取不到

在 CSS 中，float 是一个常用的布局属性。它可以让元素浮动到文档流中的左侧或右侧，从而实现元素之间的分布排版。

然而，在使用 float 属性时，开发者可能会遇到一个常见的问题：无法获取被浮动元素的高度值。

.demo {
  float: left;
  height: 100px;
}

上述代码中，我们为一个名为 demo 的元素设置了 float 属性，该元素被浮动到左侧。同时我们也设置了 demo 元素的高度为 100px。

然而，在实际使用中，我们会发现，无论怎么获取元素的高度值，都无法获得设置的 100px。这是为什么呢？

原因在于，使用 float 属性后，元素将脱离文档流，其高度被父元素忽略，导致无法被获取。

对于这个问题，我们可以采取以下方法来解决：

// 方法一：采用 clear 属性清除浮动。
.demo {
  float: left;
  height: 100px;
  clear: both;
}

// 方法二：给父元素添加 overflow 属性。
.parent {
  overflow: hidden;
}

在方法一中，我们给浮动元素添加了 clear 属性，该属性可以让浮动的元素“自清浮动”，从而避免元素高度失真的问题。

在方法二中，我们给父元素添加了 overflow 属性，这可以让父元素“包含”浮动元素，从而获取到元素的真实高度值。

通过以上方法，我们可以避免 float 属性可能带来的高度获取问题，从而更好地进行布局操作。