<!doctype html> <html> <head> <meta charset="utf-8"> <title>无标题文档</title> </head> <style> .fuqing{ border: 1px solid red; overflow: hidden; } .erzi{ border: 1px solid blue; height: 100px; float: left; } /*1、都不浮动,发生:不发生任何变化,继承父亲的宽度*/ /*2、父子都浮动,发生:脱离文档流,不继承父亲宽度,缩小,浮动宽度由内撑开 div{ float: left; } */ /*3、父浮 子不浮,发生:同第二章情况*/ /*4、父不浮 子浮,发生:塌陷,父不变化,子变小,解决办法,给父亲设置overflow: hidden;*/ </style> <body> <div class="fuqing"> <div class="erzi"></div> </div> </body> </html>