clear before_After用法

编程小6 (1) 2024-06-28 16:23

Hi，大家好，我是编程小6，很荣幸遇见你，我把这些年在开发过程中遇到的问题或想法写出来，今天说一说
clear before_After用法,希望能够帮助你!!!。

第一种样式设置

当在一个元素里添加span，想要设置css样式，需要重新命名再设置css样式，才会达到效果，比较麻烦

<!DOCTYPE html>
 <html>
 	<head>
 		<meta charset="utf-8">
 		<title></title>
 		<style>
 			span:nth-of-type(1){
				border: 1px solid red;
			}
 			span:nth-of-type(2){
 				border: 1px solid salmon;
 			}
 		</style>
 	</head>
 	<body>
 		<p>
			<span>爱:</span>
 			我爱css
			<span>不爱</span>
 		</p>
 	</body>
 </html>

第二种样式设置

我们可以发现,我们可以直接在css里面用.pp：before（前）创建一个行内元素
.pp：after（后）创建一个行内元素

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			.pp:before{
				content: "我:";
				border: 1px red solid;
			}
			.pp::after{				content: "不爱";
				border: 1px red solid;
			}
		</style>
	</head>
	<body>
		<p class="pp">
			我爱css
		</p>
	</body>
</html>

.clearfix:after清除浮

想必你也看到也懂了。

<!DOCTYPE html>
 <html>
 	<head>
 		<meta charset="utf-8">
 		<title></title>
 		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
 		<style>
 		div{
 			background-color: gold;
 		}
 		div p{ background-color: hotpink; float: left;}
 		.clearfix:after{
 			content: "";
 			display: block;
 			clear: both;
 
 		}
 		</style>
 		
 	</head>
 	<body>
 		<div class="clearfix">
 			<p>abc</p>
 			<p>dev</p>
 			<p>good</p>
 			
 		</div>
 	</body>
 </html>

今天的分享到此就结束了，感谢您的阅读，如果确实帮到您，您可以动动手指转发给其他人。