解決float布局時高度塌陷的最終方案after偽類元素 · 前端

``` <!DOCTYPE html> <html lang="zh-cn"> <head> <meta charset="utf-8"> <title>site title</title> <style type="text/css"> div{font-size:30px;} .box1{ border: 10px solid deeppink; } .box2{ width: 100px; height: 200px; background-color: #fba; float: left; } .box3{ clear: both; } </style> </head> <body> <div class="box1"> <div class="box2">box2</div> <div class="box3">box3</div> </div> </body> </html> ``` ![](https://img.kancloud.cn/83/31/8331e64343e32261c9bbef6a11cbd017_1048x242.png) 將.box3你的內容box3去掉后效果，box3利用clear就撐起了整個父元素 ![](https://img.kancloud.cn/91/5c/915cce086cbfb9d2ae1203c1c0aa462d_1049x242.png) 通常情況下它是沒有影響的，但是如果設置了全局樣式，情況就變了 ``` div{ height:30px; } ``` 高度又變成了之前的情況了那么這時我們就利用到了afte偽元素，給box1加偽元素，并設置為塊 ``` <!DOCTYPE html> <html lang="zh-cn"> <head> <meta charset="utf-8"> <title>site title</title> <style type="text/css"> div{font-size:30px;} .box1{ border: 10px solid deeppink; } .box2{ width: 100px; height: 300px; background-color: #fba; float: left; } .box1::after{ content:''; display:block; clear:both; } </style> </head> <body> <div class="box1"> <div class="box2">box2</div> </div> </body> </html> ``` ![](https://img.kancloud.cn/06/25/0625da54102289b0aaebb551dfcb4a16_1048x310.png) 完美！