请问老师我的代码方法二和方法三清除浮动没有效果？
来源：2-11 清除浮动的常用方法
Larry要加油好好学习
2020-09-07 21:46:17
<!DOCTYPE html>
<html>
<head>
<title>float</title>
<meta charset="utf-8">
<style type="text/css">
body{border:1px solid;
}
.one{width: 100px;
height: 100px;
background:orange;
float:left;
}
.two{width: 100px;
height:100px;
background:red;
float:left;
}
.three{width: 100px;
height: 100px;
background:blue;
float:left;
}
.four{width: 500px;
height: 200px;
background:green;
}
.clearfix:after{
content:".";
height:0;
display:block;
visibility:hidden;
clear:both;}
.clearfix{zoom:1;}/*方法三*/
.container{overflow:hidden;}/*方法二*/
</style>
</head>
<body>
<div class="container clearfix">
<div class="one">11</div>
<div class="two">22</div>
<div class="three">33</div>
<div class="four">44</div>
</div>
</body>
</html>
1回答
-
好帮手慕久久
2020-09-08
同学你好，方法二和方法三，都可以清除浮动的影响，但是由于有“.four”元素，它不是浮动的，所以效果不明显，可以将“.four”删除，再看效果，如下：
使用“clearfix”的方式:
未使用之前，效果如下：
使用“clearfix”后，效果如下：
同学可以试试效果。
如果我的回答帮到了你，欢迎采纳，祝学习愉快！
0
相似问题