老师我想请问下::after的那种写法可以改写成这样吗

<style>

* {

margin: 0;

padding: 0;

}

p {

width: 100px;

height: 100px;

background-color: blue;

float: left;

margin: 20px;

}

.clearfix {

clear: both;

}

</style>

</head>

<body>

<div >

<p></p>

</div>

<div>

<p></p>

</div>

</body>

效果是一样的请问除了写法上原理上有什么区别吗谢谢老师

源自：浮动与定位 2-4 清除浮动

收起

1回答

好帮手慕慕子回答被采纳获得+3积分 2022-06-12 13:24:17

同学你好，可以的，两者的区别就是::after方式只需要书写css代码，html结构中不用再多写一个空标签；粘贴的代码这种写法，html结构中需要单独书写一个空标签。

两种方式都可以实现清除浮动，实际开发中更多的是使用::after伪元素的方式，不过这不是硬性规定的，同学可以根据自己的编码习惯选择其中一种方式。

祝学习愉快~

慕仙0240544 提问者 #1

<style>
p{
width: 100px;
height: 100px;
background-color: blue;
float: left;

}
div{
background-color: violet;
}
div::after{
content: "";
display: block;
clear: both;
margin-top: 20px;

}
</style>
</head>
<body>
<div>
<p></p>
<p></p>
</div>
<div>
<p></p>
<p></p>
</div>

</body>
老师那我margin写在::after里面为啥踹不动盒子这样看和div感觉还是有很大的不同的

2022-06-13 08:57:37
好帮手慕慕子回复提问者慕仙0240544 #2

同学你好，因为::after伪元素的默认特性，可以设置marign属性，但是不会生效，所以无法踹其他盒子。祝学习愉快~

2022-06-13 11:20:52