1. 父級div定義height * 原理：手動給父級元素定義height,就解決了父級元素無法自動獲取到高度的問題， * 優點：簡單 * 缺點：只適合高度固定的布局。 2. 結尾處加空的div標簽 clear:both * 原理：在浮動元素后邊加一個空的div，然后利用css提供的clear:both;清除浮動。會讓父級div自動獲取到高度， * 優點：不用確定父元素的高度 * 缺點，如果浮動元素過多的話，會出現太多的div ``` <div class="fa1" style="float: left; width: 300px;height: 300px;"> 浮動元素 </div> <!-- 2使用css3的屬性 clear:both; --> <div style="clear: both;"> </div> ``` 3. 父級div定義偽類：after和zoom； 最適合的，兼容各種情況，可以復用 ``` /* 偽類:after是指在.fa選擇的元素后邊加元素 */ .fa:after{ /* 加入元素的內容 */ content: ""; /* 將元素設置為塊元素 */ display: block; /* 將元素本身隱藏 */ visibility: hidden; /* 設置元素的高度，如果沒有內容可以不設置 */ height: 0px; /* 清除浮動 */ clear: both; /* 超出部分隱藏 */ overflow: hidden; } /* 不支持偽類的元素，使用zoom縮放屬性讓div遠離浮動的破壞 */ .fa{ zoom: 1; } ``` 4. 父元素設置overflow:hidden;可以清除浮動 * 缺點：超出盒子的部分會被隱藏 5. 雙偽元素法 * 最好用。 * 在要浮動的元素的前邊和后邊設置 ``` .fa:before, .fa:after{ content: ""; display: block; clear: both; } .fa{ zoom: 1; } ```