讲一下怎么区分伪类、伪元素，同时优雅的处理页面浮动的问题
讲一下怎么区分伪类、伪元素，同时优雅的处理页面浮动的问题
为什么写这篇文章呢？原因很简单，因为我发现这几个概念不仅仅是编码的人搞不明白，很多的前端，就是靠这个技术吃饭的人都很多搞不明白怎么回事的，为什么和浮动一起说呢，其实这篇文章真正的要说的是浮动给我们的布局带来的问题，我们应该怎么合理的处理，还有就是伪元素到底是什么，我们应该怎么优雅的使用，那为什么写伪类呢？因为我发现竟然有人把伪类和伪元素一直看成一种东西，这个我是接受不了的，所以一起说一下。
伪类介绍
首先介绍一下什么是伪类：伪类其实我们经常用的到，只是我们自己不会刻意的说这个是伪类这样的一个东西，我下面简单的举个例子就明白了怎么回事
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>csdn测试</title>
<style>
* {
margin: 0;
padding: 0;
}
span{
display: inline-block;
height: 2em;
width: 550px;
background: #FFF;
}
a {
text-decoration: none;
font-size: 2em;
padding: 0 30px;
}
span a:hover {
border-radius: 30px;
padding: 0 30px;
background: #F40;
color: #FFF;
}
span a:visited{
color: #000;
}span a:visited:hover{
color: #FFF;
}
</style>
</head
<body>
<span><a href="#">这是一个链接</a></span>
</body>
</html>效果这里就不做什么展示了，直接代码拿去运行了就可以，上面看完经常前端的人一定会说我写的有疑问，说，你个彩笔，做背景用span做什么，其实我是准备后面说别的问题的时候使用的。不要见怪，这里直接使用div做背景是最合适的。那么上面:这个符号连接的就是伪类，帮助我们做一些样式用的，本质是一个css
伪元素介绍
首先要明白的是伪元素是html标签本身的属性，和css没有关系，只是我们使用css样式将这个东西展现了出来，这是一点，其次，我们使用伪元素的时候，content是必有属性，不可以缺少。简而言之，html中没有，但是可以被css操作的可以理解为伪元素,
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>csdn测试</title>
<style>
* {
margin: 0;
padding: 0;
color: #424242;
font-family: arial;
}p
ul{
list-style: none;
}
a{
text-decoration: none;
}
span::before{
content: '这是'
}
span::after{
content: '啊'
}
</style>
</head
<body>
<span>
csdn
</span>
</body>
</html>这里就不是运行了，直接就是“这是csdn啊”这句话，就是说明一下伪元素是存在的，只是我们平常看不到罢了
浮动介绍
我们都知道float是可以让元素直接进行浮动的，float 属性定义元素在哪个方向浮动。以往这个属性总应用于图像，使文本围绕在图像周围，不过在 CSS 中，任何元素都可以浮动。浮动元素会生成一个块级框，而不论它本身是何种元素。但是这里需要注意一点的是假如在一行之上只有极少的空间可供浮动元素，那么这个元素会跳至下一行，这个过程会持续到某一行拥有足够的空间为止,产生浮动的元素，块级元素是看不到他们的
写个例子
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css" media="screen">
*{
margin: 0;
padding: 0;
}
.warpper{
border: 10px solid black
}
.content{
width: 100px;
height: 100px;
border: 1px solid red;
float: left;
}
</style>
</head>
<body>
<div class="warpper">
<div class="content">1</div>
<div class="content">2</div>
<div class="content">3</div>
<div class="content">4</div>
<div class="content">5</div>
<div class="content">6</div>
</div>
</body>
</html>显示效果：
也就是说，被浮动了的元素是不可以撑起来这个外层的div的
浮动的元素在父级的元素不够包它的时候，他会自动填充到下一行
写个例子
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css" media="screen">
*{
margin: 0;
padding: 0;
}
.warpper{
width:400px;
border: 1px solid black
}
.content{
width: 100px;
height: 100px;
border: 1px solid red;
float: left;
}
</style>
</head>
<body>
<div class="warpper">
<div class="content">1</div>
<div class="content">2</div>
<div class="content">3</div>
<div class="content">4</div>
<div class="content">5</div>
<div class="content">6</div>
</div>
</body>
</html>显示效果：
这里当外层元素的宽度不够支持内部元素的宽度总和的时候，浮动的元素是直接就换到下一行了
当我们将元素清除浮动以后，我们就可以直接使父级看到他们，我们可以直接在原来的基础上新加一个p元素，然后给p元素进行浮动的清除，那么这个办法也是可以直接解决父级元素看不到的问题，但是我们为什么不建议那么做呢，原因是很简单，我们一般是不改变原页面结构的，我们为了实现一个功能改变了原来页面结构是非常不合理的一个做法，所以才有了今天下面的写法，我们在最外层的伪元素结尾部分加上清除浮动就可以了。但是这里有一点是需要注意的，就是伪元素默认是行级元素，我们必须给他改为块级元素才是可以的。这里是一点需要注意的。
写个例子
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css" media="screen">
*{
margin: 0;
padding: 0;
}
.warpper{
border: 1px solid black
}
.content{
width: 100px;
height: 100px;
border: 1px solid red;
float: left;
}
.warpper::after{
content: "";
display: block;
clear: both
}
</style>
</head>
<body>
<div class="warpper">
<div class="content">1</div>
<div class="content">2</div>
<div class="content">3</div>
<div class="content">4</div>
<div class="content">5</div>
<div class="content">6</div>
</div>
</body>
</html>显示效果：
这样就使用伪元素巧妙的将浮动的问题解决了，这个解决办法是比较合理的。