<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>CLEAR</title> <style> .outer{ background-color: red; } .menu1{ width: 100px; height: 50px; color: darkorange; float: left; } .menu2{ width: 100px; height: 50px; color: darkorange; float: left; } .clear{ /*1.clear的旁边不能有浮动的效果，如果有我就下去 2.这里的div的意思就是说添加一个没有内容的div块，但是清除左右独自占一行
3.或者使用在.outer这个盒子中添加overflow=hidden带去clear */ clear: both; } .boom{ height: 20px; background: blue; text-align: center; } </style> </head> <body> <div class="outer"> <div class="menu1">菜单1</div> <div class="menu2">菜单2</div> <!--这个地方解决底部下移不影响背景颜色--> <div class="clear"></div> </div> <div class="boom">底部</div> </body> </html>