当子元素设置浮动后，会脱离文档流，导致父元素的高度塌陷。解决方法包括：设定固定高度、父元素浮动、使用overflow属性、添加清除浮动块以及使用after伪类清除浮动。每种方法各有优缺点，如兼容性、灵活性和是否引入冗余元素等，选择时需根据实际需求权衡。
目录
什么叫做高度塌陷
若文档流中父元素不定义具体高度，其默认高度由子元素撑开。当子元素设置浮动，子元素会完全脱离文档流，子元素无法撑起父元素高度，致使父元素高度塌陷
示例：
<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-color: aqua;
float: left
扫一扫
1125
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
