当前位置：网站首页>Understand the role of before and after Clearfixafter clear floating

Understand the role of before and after Clearfixafter clear floating

2022-06-11 02:05:00 【Bejpse】

The first style setting

When adding... To an element span, Want to set up css style , You need to rename it and set it again css style , To achieve the effect , More trouble

<!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> Love :</span>
 			 I love css
			<span> Don't love </span>
 		</p>
 	</body>
 </html>

Insert picture description here

The second style setting

We can find out , We can go straight to css with .pp：before（ front ） Create an inline element
.pp：after（ after ） Create an inline element

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

Insert picture description here

.clearfix:after Clear the float

You must have seen and understood .

<!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>

Insert picture description here