问题描述:float遇到父元素塌缩问题的原因、解决方案及其原理?
现为该问题假设场景:想要通过对两个子元素使用float属性实现父元素内两个子div块在同一行显示,实现代码如下:
html:
<!DOCTYPE html>
<html>
<body>
<div class="main">
<div class="left"></div>
<div class="right"></div>
</div>
</body>
</html>
css:
.main{
border:10px solid black;
width:500px;
}
.left{
height:100px;
width:200px;
background-color:red;
float:left;
border:2px solid black;
}
.right{
width:200px;
height:100px;
background-color:blue;
float:right;
border:2px solid black;
}
会出现如下图所示的情况:
可以发现浮动后虽然实现了两子div在同一行显示,但父元素的边框却未被子元素撑起,仿佛与子元素脱离了联系,这种情况即为父元素塌缩。
1.问题原因
父元素中所有子元素脱离文档流,此时父元素相当于空,没有子元素为其撑开高度。
2.解决方案:清除浮动
(1)法一:添加新元素,clear:both
<div class="main">
<div class="left"></div>
<div class="right"></div>
<div style="clear:both"></div>
</div>
原理:增加非浮动子元素在浮动元素下方,父元素被新元素撑起。
弊端:增加多余标签。
(2)父元素上添加overflow:auto/hidden
.main{
border:10px solid black;
width:500px;
overflow:auto;
zoom:1;/*处理兼容*/
}
原理:为父元素增加自动clear功能,使其能够识别float元素位置。
弊端:兼容问题。
(3)父元素也float
.main{
border:10px solid black;
width:500px;
float:left;
}
原理:父带着子一起漂。
弊端:场景局限/影响其他元素,早晚得处理。
(4)父元素上使用:after进行clear处理(推荐使用)
.main{
border:10px solid black;
width:500px;
zoom: 1;/*具体参照底部参考链接*/
}
.main:after{
clear:both;
content:'';/*若content设置内容,则使其宽高为0即可*/
display:block;/*需将其设为非浮动独立块元素*/
}
原理:同(1)。
参考资料:阮大佬的博客。