目录
3.1每个盒子设定固定的width和height,这个方法是最简单的。
3.4 在父元素的最下面添加一个元素并设置clear:both样式
1.概念：
当父元素没设置足够大小的时候，而子元素设置了浮动的属性，子元素就会跳出父元素的边界（脱离文档流），当父元素没有给定高度时，并且父元素中又没有其它非浮动的元素时，父盒子的高度就会直接塌陷为零， 我们称这是高度塌陷。
2.示例：
//CSS样式
<style>
div{
width: 450px;
background-color: pink;
}
div>.box01{
width: 200px;
height: 200px;
float: left;
background-color: blue;
}
</style>
//结构
<body>
<div>
<div class="box01"></div>
<div class="box01"></div>
<div class="box01"></div>
</div>
</body>3.解决办法
3.1每个盒子设定固定的width和height,这个方法是最简单的。
<div class="fater" style="height:200px ;weight:200px">父盒子
<div class="son">子盒子</div>
<div class="son">子盒子</div>
<div class="son">子盒子</div>
</div>3.2给外部的父级元素页添加浮动
<div class="fater" style="float:left ;">父盒子
<div class="son">子盒子</div>
<div class="son">子盒子</div>
<div class="son">子盒子</div>
</div>3.3给父级元素添加overflow属性
<div class="fater" style="overflow: hidden ;">父盒子
<div class="son">子盒子</div>
<div class="son">子盒子</div>
<div class="son">子盒子</div>
</div>
或
<div class="fater" style="overflow: auto ;">父盒子
<div class="son">子盒子</div>
<div class="son">子盒子</div>
<div class="son">子盒子</div>
</div>
或
<div class="fater" style="overflow: scroll;">父盒子
<div class="son">子盒子</div>
<div class="son">子盒子</div>
<div class="son">子盒子</div>
</div>其中用到了overflow的hidden、auto、scroll值
- hidden：溢出隐藏
- auto：当文字溢出时会产生滚动条
- scroll：滚动条无论是否溢出都会显示，很不美观
3.4 在父元素的最下面添加一个元素并设置clear:both样式
<div class="d1">父盒子
<div class="d2">子盒子</div>
<div style="clear: both;"></div> <!--清除浮动块-->
</div>3.5 用伪元素after清除浮动
.box01:after{
content: "";
display: block;
height: 0;
clear: both;
visibility: hidden;
} 这是一种纯CSS的解决浮动造成盒子塌陷方法，没有引入任何冗余元素，推荐使用！
版权声明：本文为liu0218原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接和本声明。