第三种方法优于第二种方法？
<!DOCTYPE html>
<html>
<head>
<title>清除浮动演示</title>
<link rel="stylesheet" type="text/css" href="index.css">
</head>
<body>
<div id="div1">
<div id="div2"></div>
<div id="div3"></div>
<div id="clearDiv">dsf dsfljdslkfjsdlkfjdslkfjdsfjkldsjf</div>
<div id="div4"></div>
</div>
</body>
</html>
上面，在cleardiv中添加了一些内容；然后采用第三种方法来清除浮动：
#div1{
background-color: red;
}
#div2{
background-color: yellow;
width: 200px;
height: 200px;
float: left;
}
#div3{
background-color: blue;
width: 220px;
height: 220px;
float: left;
}
#div4{
background-color: black;
width: 240px;
height: 240px;
}
#clearDiv::after{ /**/
content: ""; /*clearDiv后面添加内容为空；目的一：使clearDiv后面有一个内容对象；目的二：不想让这个对象中有任何内容。一个内容为空的载体。*/
visibility: hidden; /*隐藏content内容；虽然content中内容为空，但为了防止因为各种原因content中有内容后，content的内容会显示在界面上后造成影响。*/
/*上面两条是一组，双保险*/
height: 0px;/*行高设为0，目的是让其不要占空间*/
display: block; /*将content转换成块级元素*/
clear: both;
}
#clearDiv{
zoom:1; /*为了解决在IE浏览器上显示时，会出现的问题*/
}
实际显示效果：
不是说，第三种方法，可以在clearDiv中误添加内容后，会不予显示吗？这也是优于第二种方法的地方；但实际测试，发现，误添的内容还是显示了。。。。
老师，我的主要疑问是，（1）第三种方法究竟比第二种方法好在哪儿？（2）第三种方法中的内容隐藏是什么意思？
23
收起
正在回答
1回答
同学你好
1、如果使用第二种方式清除浮动，那么div中的文字会出现在绿色方框上方，而使用第三种会出现在右边，不会破坏原有的浮动效果，如下
2、同学的注释中也写到了，这里隐藏的是content中的内容，而不是div中的内容
如果没有visibility: hidden，content中的内容就会显示出来，如下
祝学习愉快~
java工程师2020版
- 参与学习 人
- 提交作业 9410 份
- 解答问题 16556 个
综合就业常年第一，编程排行常年霸榜，无需脱产即可学习，北上广深月薪过万 无论你是未就业的学生还是想转行的在职人员，不需要基础，只要你有梦想，想高薪
了解课程
恭喜解决一个难题，获得1积分~
来为老师/同学的回答评分吧
0 星