<!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>