解决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) 完美！