在CSS中，浮動是一種方法，可以使元素從普通的文檔流中移除，并使其在指定位置懸浮。利用浮動，可以創建復雜的布局和設計，例如兩欄、三欄布局等。
然而，隨著頁面元素的不斷增加和變化，浮動也可能引發一些問題。其中之一就是折疊問題。簡單來說，就是父元素的高度不能被自適應地擴展到子元素的高度，導致布局混亂。
下面是一個簡單的例子，展示了折疊的效果：
<html>
<head>
<style>
.container {
border: 1px solid #000;
}
.box {
float: left;
width: 100px;
height: 100px;
background-color: #f00;
}
</style>
</head>
<body>
<div class="container">
<div class="box"></div>
<div class="box"></div>
</div>
</body>
</html>在上面的代碼中，為了創建一個紅色的正方形，我們設置了兩個寬為100px、高為100px的浮動元素。但是，此時父元素
的高度并沒有被自動擴展，所以出現了折疊現象。
解決這個問題的方法有許多。其中最常見的方法是在父元素
中加入一個類似于 clear:both; 的清除浮動語句。比如：
.container:after {
content: "";
display: table;
clear: both;
}這樣，就可以在父元素的最后插入一個空元素，并將其清除浮動，從而解決折疊問題。另外，還有很多其它的方法，例如給父元素定義高度、使用 overflow 屬性等等。
總之，避免和解決浮動折疊問題是Web前端開發人員需要掌握的一項基本技能。只有在掌握了這些方法以后，我們才能夠更好地設計出漂亮、實用的網頁布局。
上一篇css浮動布局和定位布局
下一篇css浮動屬性改變文字流