CSS - 正確解決 float 高度坍塌的問題
阿新 • • 發佈：2020-07-19
<!DOCTYPE html> <html lang="en" dir="ltr"> <head> <meta charset="utf-8"> <title>正確解決高度塌陷</title> <style media="screen"> .box { border: 1px solid; } .float { width: 100px; height: 100px; background: skyblue; float:left; } .clearfix:after { content:''; clear: both; display:block; } </style> </head> <body> <div class="box clearfix"> <div class="float"> </div> </div> </body> </html>
補充：
一， float 使父元素高度坍塌的原因 ：
子元素使用 float 後，使其脫離文件流 。 使父元素檢測不到其尺寸。
二，5種解決方案 ：
1，為父元素設定高度 ， 缺陷是 ：不靈活
2，為父元素設定 float , 缺陷是 ：使父元素也脫離，沒有真正解決
3，為父元素設定 overflow:hidden ， 缺陷是 ：會隱藏相關的元素
4，子元素後面新增 一個 clear:both 的 兄弟元素 ， 缺陷是 ： 使 html 添加了一個多餘的結構
5，為父元素新增一個 content:"";clear:both;display:block 的偽類 。 （ 可取 ）