目录
什么叫做高度塌陷
若文档流中父元素不定义具体高度,其默认高度由子元素撑开。当子元素设置浮动,子元素会完全脱离文档流,子元素无法撑起父元素高度,致使父元素高度塌陷
示例:
<style>
/*设置父盒子边框线样式和宽度 不设置高度*/
.fatherbox{
width: 500px;
border: 20px solid red;
}
/*设置子盒子宽度、高度、背景颜色*/
.box1{
width: 100px;
height: 100px;
background-color: aqua;
}
</style>
<body>
<div class="fatherbox">
<div class="box1"></div>
</div>
</body>
页面渲染效果:
可见父盒子高度被子盒子高度撑开
当子盒子添加浮动属性时
.box1{
width: 100px;
height: 100px;
background-col