清除浮动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)