伪元素

## 知识点
1、在元素的前面添加内容
2、清除浮动

## Demo

![](https://lula.fun/usr/uploads/2019/11/3141446098.png)

![](https://lula.fun/usr/uploads/2019/11/3133820487.png)

## 代码

```html
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			/* 在内容之后插入 content里面的值 */
			a::after{
				content: "搜索一下";
				color: red;
				
			}
			/* 在内容之前插入 content里面的内容 */
			a::before{
				content: "iMoe";
				color: orange;
			}
			
			/* 另一个作用 清除浮动 */
			.box{
				width: 300px;
			}
			
			.left{
				width: 100px;
				height: 100px;
				background-color: red;
				float: left;
			}
			
			.right{
				width: 200px;
				height: 100px;
				background-color: green;
				float: right;
			}
			
			
			.box2{
				width: 500px;
				height: 100px;
				background-color: black;
			}
			
			
			.clearfix:after{
				/* 内容为小数点 */
				content: ".";
				/* 转化为块级元素 */
				display: block;
				height: 0;
				/* 内容隐藏 */
				visibility: hidden;
				/* 清除浮动 */
				clear: both;
			}
			
		</style>
		
	</head>
	<body>
		<a href="https://lula.fun/go/YmFpZGkuY29t" target="_blank" >百度</a>
		
		
		<div class="box clearfix">
			<div class="left">Left</div>
			<div class="right">Right</div>
		</div>
		<div class="box2">box2</div>
		
	</body>
</html>

```

#### 关于用div清除浮动的代码演示

<div class="inner-content" >
<p class="inser-title">浮动带来的问题以及解决方法</p>
<div class="inster-summary text-muted">
知识点浮动带来的问题：可能会影响后面的布局以及解决方法：用完浮动后，清除浮动示例浮动示例去掉main部分的高度限制...
</div>
</div>
</a>

</div>

</div>