老师，方法三的div盒子为什么有了高度呢
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<style>
* {
margin: 0;
padding: 0;
}
.clearfix::after{
/* 是因为::after是创建最后一个伪元素，伪元素需要转换成块级元素才能消除浮动 */
/* content必须写 */
content: "";
clear: both;
/* 转为块级元素 */
display: block;
}
div{
margin-bottom: 10px;
}
p {
float: left;
width: 100px;
height: 100px;
background-color: orange;
margin-right: 20px;
}
</style>
</head>
<body>
<div class="clearfix">
<p></p>
<p></p>
</div>
<div class="clearfix">
<p></p>
<p></p>
</div>
</body>
</html>
正在回答
同学你好，因为清除浮动的方法三：是使用::after伪元素给盒子添加最后一个子元素，并且给::after伪元素设置了clear属性，而clear属性定义了元素的哪边上不允许出现浮动元素。在 CSS1 和 CSS2 中，这是通过自动为清除元素（即设置了 clear 属性的元素）增加上外边距实现的。在 CSS2.1 中，会在元素上外边距之上增加清除空间，实现清除浮动的目的，此时外层盒子被撑开，从而有了高度，如图
祝学习愉快！
-
同学你好，clear属性设置元素不一样。方法二是给父元素设置clear:both;父元素没有高度。方法三是添加了伪类，也就是有了父元素第三个子元素，相当于这样：
手动加一个子元素，给最后这个元素设置clear:both;
父元素会有高度
自己再理解下，祝学习愉快！
2022-02-25 17:48:48
相似问题
登录后可查看更多问答，登录/注册
恭喜解决一个难题，获得1积分~
来为老师/同学的回答评分吧
0 星