CSS浮動布局是一種常用的網頁布局方式，它可以實現網頁元素自適應寬度，但是自適應高度卻是一個較為麻煩的問題。下面我們將通過一些CSS代碼介紹如何實現CSS浮動布局的自適應高度。

html,body {
height: 100%;
margin: 0;
}
.container {
min-height: 100%;
position: relative;
}
.header {
height: 80px;
background-color: #ccc;
}
.content {
float: left;
width: 70%;
background-color: #eee;
padding: 20px;
box-sizing: border-box;
}
.sidebar {
float: left;
width: 30%;
background-color: #ddd;
padding: 20px;
box-sizing: border-box;
}
.clearfix:after {
content: "";
display: block;
clear: both;
}
.footer {
position: absolute;
bottom:0;
height: 50px;
background-color: #ccc;
width: 100%;
}

我們可以將HTML文檔分為header、content、sidebar和footer四個部分，其中content和sidebar兩塊采用浮動布局方式。針對浮動布局下自適應高度的問題，可以在.container容器中設置其最小高度為100%。此外，為了避免在容器中設置margin，我們可以使用相對定位的方式。footer元素采用絕對定位方式，用bottom: 0;將元素定位在容器的底部。

當然，為了避免浮動元素對容器的影響，我們可以使用clearfix類來清除浮動元素。在clearfix類中使用偽元素:after，將其內容定義為空，再設置clear:both即可實現清除浮動的效果。

綜上所述，通過合理的CSS編寫，我們可以實現CSS浮動布局的自適應高度。這種布局方式不僅美觀簡潔，而且可以適應不同設備和分辨率的屏幕，提高用戶體驗。