浮动塌陷-overflow:hidden来解决 

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

 

posted @ 2020-02-23 11:42  一阙梅曲香素笺  阅读(154)  评论(0)  编辑  收藏  举报