老师帮我看一下代码吧，方法二与方法三为啥不能实现呢？
来源：2-11 清除浮动的常用方法
春萍401599
2020-07-02 09:04:06
<!DOCTYPE html>
<html>
<head>
<title></title>
<mate charset="utf-8">
<style type="text/css">
/*.clear{clear:both;} *//*方法一*/
.clearfix:after{ /*方法三*/
content:".";
display:block;
height:0;
visibility:hidden;
clear:both;
}
.clearfix{*zoom:1;}
.container{
width:500px;
border:2px solid #333;
/*overflow:hidden;
zoom:1;*/ /*方法二*/
}
.box1{
width:100px;
height:100px;
background:blue;
color:#fff;
float:left;
}
.box2{
width:100px;
height:100px;
background:red;
color:#fff;
float:left;
}
.box3{
width:100px;
height:100px;
background:green;
color:#fff;
float:left;
}
.box4{width:400px;
height:300px;
background:yellow;
color:#fff;}
</style>
</head>
<body>
<div class="container clearfix">
<div class="box1">111</div>
<div class="box2">222</div>
<div class="box3">333</div>
<div class="clear"></div>
<div class="box4">444</div>
</div>
</body>
</html>
1回答
-
好帮手慕星星
2020-07-02
同学你好，overflow属性以及:after伪类方式解决的是最后浮动元素带来的影响，比较特殊，记住就好。可以调换下box4盒子位置
效果
如果想要实现三个小盒子在底部的效果，可以将box4盒子放在最上面，自己测试下。
祝学习愉快！
0
相似问题
回答 1