html塌陷問題和解決方案
阿新 • • 發佈：2018-11-25
如果父元素只包含了浮動元素 ，那麼父元素在未設定高度的同時，則父元素高度塌縮為零;
1.建立一個用來清除浮動的css樣式類（.clearfix）
2.針對包裹的全是浮動元素的父級容器使用
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style> #box{border: 10px solid red;} #boxa{width: 30%; height: 40px;float: left; background: #ADFF2F;} #boxb{width: 70%; height: 40px;float: left;background: #00FFFF;} .clearfix{zoom:1}/*//IE瀏覽器的專用屬性（針對IE*/） .clearfix:after{/*//偽物件選擇符 （在這個物件被瀏覽器渲染後新增一定的內容）*/ content:".";/*//新增內容寫在這裡的屬性值 這個屬性是專門配合偽類物件,必須寫;*/ display:block;/*//將新增的內容轉換為塊級元素*/ visibility:hidden;/*//視覺化屬性；控制元素是否可見;無論是否可見，保留物理空間；和display屬性不同;*/ height:0;/*//將新增進去的內容的高度設定為0；消除其佔位；*/ clear:both;/*//將新增去的內容作為清除浮動的物件，實現外圍物件中由內容存在，因此可以自動判斷高度;*/ } .clearfix:after{ content: "x"; display: block; visibility: hidden; height: 0; clear: both; } </style> </head> <body> <div id="box" class="clearfix"> <div id="boxa"></div> <div id="boxb"></div> </div> </body> </html>