清除浮動overflow方法 · css3

overflow屬性清除浮動影響是一個小偏方，值必須是hidden 可以解決浮動的所有的問題代碼格式： ``` overflow:hidden ``` 通過overflow屬性解決浮動影響的原因：overflow屬性有BFC特性，BFC特性有一個特點，設置了該屬性的元素就擁有被內部元素撐高的特點。使用說明：哪個盒子受浮動影響，就放到哪個盒子里實際工作中，使用內墻法和overflow屬性去解決浮動的影響。代碼如下： ``` <style> *{ margin: 0; padding: 0; } .box{ width:800px; border: 5px solid red; overflow:hidden; } .box1{ width:800px; border: 5px solid rgb(16, 95, 243); overflow:hidden; } .box p{ width: 80px; height:80px; background-color:cyan; float:left; margin:0 5px; } .box1 p{ width: 80px; height:80px; background-color:rgb(231, 247, 8); float:left; margin:0 5px; } </style> </head> <body> <div class="box"> <p></p> <p></p> <p></p> <p></p> </div> <div class="box1"> <p></p> <p></p> <p></p> <p></p> </div> </body> ``` 效果: ![](https://img.kancloud.cn/9b/6b/9b6ba229e4eef3082091b43888790ac9_1335x611.png)