CSS浮動是一種很常用的布局技巧，但它可能會影響元素的高度，有時讓人感到疑惑。本文將介紹CSS浮動對元素高度影響的原因及解決方法。

// HTML
<div class="parent">
<div class="child float-left">浮動元素</div>
<p>其他內容</p>
</div>
// CSS
.float-left {
float: left;
}

當我們運用上述代碼時，浮動元素會導致父元素的高度縮短。這是因為浮動元素脫離了文檔流，父元素不再自動計算包含它的高度。

解決方法如下：

// 方法一：使用clear屬性
.parent:after {
clear: both;
display: block;
content: "";
}
// 方法二：使用overflow屬性
.parent {
overflow: hidden;
}

以上兩種方法都可以使父元素重新計算高度，解決浮動元素導致高度縮短的問題。

總結：

• 浮動元素脫離了文檔流，有可能導致父元素的高度縮短。
• 使用clear或overflow屬性可以解決父元素高度縮短的問題。