父级div定义伪类:after和zoom(最靠谱的方案)
原理:IE8以上和非IE浏览器才支持:after,原理和方法2类似,zoom(IE转有属性)可解决ie6,ie7浮动问题
优点:浏览器支持好,不容易出问题(目前:大型网站都有使用,如:腾迅,网易,新浪等等)
缺点:代码多,要两句代码结合使用,才能让主流浏览器都支持
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>清除浮动</title>
<style>
*{
padding:0;
margin:0;
}
.parent{
border:2px solid green;
zoom:1;
}
.parent:after{
content:"";
clear:both;
display: block;
visibility: hidden;
}
.A{
width:100px;
height:100px;
background-color: aqua;
float:left;
}
.B{
width:100px;
height:100px;
background-color: burlywood;
float:left;
}
</style>
</head>
<body>
<div class="parent">
<div class="A"></div>
<div class="B"></div>
<div class="C"></div>
</div>
<div></div>
</body>
</html>
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】凌霞软件回馈社区,博客园 & 1Panel & Halo 联合会员上线
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步